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

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

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

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

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

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

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

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

6 комментариев

  1. Анастасия

    спасибо за материал – хорошо изложен, только мне не совсем понятны 2 вещи: 1. что отвечает за отступ от текста 2. откуда взялись 110рх? если поясните, буду оч рада

    • Sergey

      Спасибо вам за комментарий. Относительно вопросов:
      1) Если я правильно понял вопрос, то как раз именно left и right у псевдоэлементов в 110px отвечают за отступ от текста
      2) 110px – это динамический отступ горизонтальных линий от текста из первого вопроса. Если будет другое слово, то отступ должен быть подобран другой. Не очень универсальное решение, согласен.

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

Ваш адрес email не будет опубликован.