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

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

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

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

Код html:

<div class="title">Текст</div>

1	<div class="title">Текст</div>

Код css:

.title {
    /* Прячем часть линий, выходящие за пределы блока */
    overflow: hidden;
    /* Выравниваем заголовок по центру, можно указать left, right для выравнивания влево или вправо */
    text-align: center;
    /* Размер заголовка */
    font-size: 25px;
}
.title:before,
.title:after {
    /* Свойство content необходимо указывать хотя бы пустое, иначе псевдоэлементы не отобразятся */
    content: "";
    /* Свойства линий, выравнивание по центру по вертикали */
    display: inline-block;
    vertical-align: middle;
    /* Ширина - 100% и указываем толщину линии */
    width: 100%;
    height: 2px;
    /* Цвет линии */
    background-color: #f4801a;
    /* Возможность для пседоэлементов изменить позицию линии */
    position: relative;
}
.title:before {
    /* Ставим левую линию слева от текста, смещая ее на 100% влево */
    margin-left: -100%;
    /* Отступ линии от заголовка */
    left: -14px;
}
.title:after {
    /* Ставим правую линию справа от текста, смещая ее на 100% вправо */
    margin-right: -100%;
    /* Отступ линии от заголовка */
    right: -14px;
}

.title {

/* Прячем часть линий, выходящие за пределы блока */

overflow: hidden;

/* Выравниваем заголовок по центру, можно указать left, right для выравнивания влево или вправо */

text-align: center;

/* Размер заголовка */

font-size: 25px;

}

.title:before,

.title:after {

/* Свойство content необходимо указывать хотя бы пустое, иначе псевдоэлементы не отобразятся */

content: "";

/* Свойства линий, выравнивание по центру по вертикали */

display: inline-block;

vertical-align: middle;

/* Ширина - 100% и указываем толщину линии */

width: 100%;

height: 2px;

/* Цвет линии */

background-color: #f4801a;

/* Возможность для пседоэлементов изменить позицию линии */

position: relative;

}

.title:before {

/* Ставим левую линию слева от текста, смещая ее на 100% влево */

margin-left: -100%;

/* Отступ линии от заголовка */

left: -14px;

}

.title:after {

/* Ставим правую линию справа от текста, смещая ее на 100% вправо */

margin-right: -100%;

/* Отступ линии от заголовка */

right: -14px;

}

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

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

Комментарии: 3

Ольга 09.12.2017 в 00:33

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

Ответить
1. Ложников Андрей (автор) 09.12.2017 в 08:35
  
  Ольга, пришлите пример такого случая.
  
  Ответить
Ольга 14.09.2018 в 10:02

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

Ответить

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