Нам стало интересно, как можно сверстать дизайн с большим заголовком и подзаголовком меньшего размера под ним, который бы обрамлялся двойными линиями справа и слева от центрированного текста. Простой путь здесь — использовать изображения, но мы попробуем пойти намного более сложным путем — создадим это с использованием только CSS, в котором сложности возникнут из-за разнообразных свойств текста, таких как размер шрифта, длинна слов и т. п.

Идея дизайна следующая:

Наше решение работает, но оно не всем покажется идеальным. Надеемся, это вдохновит Вас на поиск более оптимальных, подходящих именно для ваших задач решений.

Если бы мы хотели применить изображения, все было бы довольно просто. Можно было бы применить фон с линиями у элемента подзаголовка и отцентрировать его. Или применить два изображения к псевдоэлементам «до» и «после» этого подзаголовка.

Но мы использовали эти псевдоэлементы для создания линий с помощью CSS. Это удобней, так как при необходимости изменить цвет, толщину, длину или другие свойства линий не нужно будет создавать и перезаливать на веб-сайт новые изображения, можно будет обойтись всего лишь изменением нескольких значений кода CSS, что гораздо быстрее и удобней.

Текст все еще находится в элементе span, который относительно спозиционирован. Правый псевдоэлемент этого элемента начинается в 100% слева с небольшим внешним отступом, чтобы слегка оттолкнуть его от текста, а для левого элемента все наоборот. Оба псевдоэлемента фиксированной высоты и свойства верхней и нижней рамок используются для создания линий. Так что фон в этом способе не используется.

Длинна линий достаточно больная, чтобы всегда вылазить за пределы родительского элемента и обрезаться с помощью скрытия избыточного содержимого у этого элемента.

.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

Пример:

В этом способе нас смущают две детали:

• Значение межстрочного интервала 0.5 используется для центрирования линий возле текста и может нуждаться в изменении в зависимости от используемого шрифта.
• Ширина псевдоэлементов с линиями задается больше, чем им надо быть по факту, чтобы они обрезались родительским элементом.

Но это совсем незначительные детали и они вряд ли вам помешают.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание стилей для полос прокрутки
• Создание рамки с трех сторон элемента различными способами
• Интересное оформление для элемента цитаты с использованием CSS