Как сделать заголовок с линиями по краям с помощью CSS

Периодически бывает нужно сделать заголовок с горизонтальными линиями по бокам от текста. Если попробовать сделать это, казалось бы, самым простым способом: создать у заголовка свойство css before (или after) с границей, которая служит линией и которую мы поднимаем на нужный уровень, то столкнемся с проблемами, которые не хочу здесь расписывать. Но нормально сделать таким способом не получается.

Поиск по интернет дает готовые приемы решения этого вопроса, которыми и хочу здесь поделиться.

Для заголовка используется тег div с классом .title и псевдоэлементы :before и :after. В div пишем нужный текст, а псевдоэлементы станут линиями по краям: :before — слева, а :after — справа.

Код html:

Код css:

Для примера я разместил картинку такой реализации, хотя там я еще добавил дополнительные элементы (цветы) над линиями (сайт женский).

линии по бокам текста на css

Оцените статью
Делаем сайт своими руками
Комментарии: 3
  1. Ольга

    Доброго времени суток!
    Подскажите пожалуйста, а как Вы адаптировали данный заголовок под мобильные устройства?
    У меня почему-то заголовок не помещается.:(

    Ответить
    1. Ложников Андрей (автор)

      Ольга, пришлите пример такого случая.

      Ответить
  2. Ольга

    Огромное спасибо!
    сделала с пунктирной линией, заменив background-color на border-top: 1px dashed #be9a6787;
    Все супер!

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