Добавление горизонтальных линий до и после заголовка или изображения на CSS

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

2015-09-09 10-43-56 Скриншот экрана

Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

Для основной обертки используем следующие CSS-правила:

Для дочернего элемента <span> добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:

Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):

Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *