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

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

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

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

Код html:

<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;
}

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

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

Понравилась статья? Поделись с друзьями:

3 комментария

  1. Ольга 4 года назад
    • admin 4 года назад
  2. Ольга 3 года назад

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

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.