Блог для вебмастеров и разработчиков
05 марта 2016, 18:15

Сложный заголовок с линиями по бокам текста на css

Сложный заголовок с линиями по бокам текста на css

Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста.

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

Код html:

<div class="title">
    <span>
        Наш<br />
        заголовок
    </span>
</div>

Код css:

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

Главное преимущество данного метода является то, что не имеет значения однотонный фон у блока или фон сделан изображением.
Комментарии ()
  1. Катя Катя 22 мая 2016, 19:00 #
    Оооооо, круто))) Спасибо, то что искала) Все работает отлично.
    1. Сергей Сергей 22 декабря 2016, 07:59 #
      Спасибо. Отличный способ!.. У меня бэкграунд на картинке с прозрачностью. Поэтому обычные методы — полоса на всю ширину, текст перекрывает её бэкграундом — никак не подходили
      1. Олег Касьянов Олег Касьянов 31 декабря 2016, 14:07(Комментарий был изменён) #
        Респект
        1. Safbek Safbek 31 декабря 2016, 15:30 #
          Спасибо! Очень познавательно. Не подскажите как сделать линию снизу? чтобы была под заголовком в центре при любом разрешении
          1. AlexRas AlexRas 23 января 2017, 21:20 #
            jsfiddle.net/ovee9cf6/

            Как-то так, если правильно понял.
          2. Денис Денис 26 марта 2017, 20:39 #
            Спасибо, огромное, то что надо!
            1. Taurus Taurus 07 июля 2017, 20:34 #
              Респект. Благодарю!!!
              1. zimel1995 zimel1995 26 октября 2017, 13:32 #
                а как сделать если две строки в h1
                1. AlexRas AlexRas 09 ноября 2017, 16:19(Комментарий был изменён) #
                  Обновил код в статье, теперь будет работать с несколькими строками.
                2. Василий Василий 26 октября 2017, 16:44 #
                  Чесслово самый нормальный способ! Благодарю
                  1. Михаил Михаил 26 октября 2017, 20:21 #
                    Отличный способ! Спасибо!
                    1. Kir Kir 03 июля 2018, 14:05 #
                      Благодарствую тебе, только начал писать, повезло, что ты есть:3
                      1. Наталья Наталья 03 октября 2018, 16:18 #
                        Спасибо, красивое решение!
                        Добавить комментарий