Блог для вебмастеров и разработчиков
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 #
                        Спасибо, красивое решение!
                        1. Алена Алена 16 апреля 2019, 18:07 #
                          Спасибо! То что мне сейчас нужно!
                          1. Виталий Виталий 19 апреля 2019, 15:18 #
                            огромное спасибо
                            1. Владислав Владислав 26 апреля 2019, 09:53 #
                              Спасибо большое, отличное решение.
                              1. Kairat Kairat 01 марта 2021, 12:48(Комментарий был изменён) #
                                Отличный способ! Спасибо!
                                1. Алексей Алексей 28 мая 2021, 13:46 #
                                  Хотелось бы обойтись без обертки span, только элементом h1 с классом title. Все работает, но у длинных заголовков в 2 строки слева и справа линии на разном уровне получаются.
                                  1. ysys ysys 03 октября 2021, 23:10 #
                                    Спасибо, интересный метод! Класс, все получилось, даже работает с вертикальным)
                                    1. Dmitry Dmitry 23 декабря 2021, 19:02 #
                                      То что нужно, просто и работает! Спасибо!
                                      1. Дмитрий Дмитрий 27 февраля 2022, 17:03 #
                                        Отличный способ, благодарю за подсказку
                                        1. Рома Рома 14 августа 2022, 23:32 #
                                          Способ отличный, но под мобильную адаптацию не подходит(((
                                          1. Рома Рома 14 августа 2022, 23:33 #
                                            Под мобильники не адаптируется((
                                            1. Флександр Флександр 06 октября 2023, 15:19 #
                                              Вопрос:
                                              Контейнер во всю ширину экрана. Зоголовки одно-два слова, расположены посредине.
                                              Как сделать подчеркивание заголовков, вне зависимости от количества слов и ширины родительского контейнера?
                                              1. Артем Артем 01 августа 2024, 01:49 #
                                                Автор если ты жив обясни могу ли я увеличить линии и если да то как
                                                1. AlexRas AlexRas 13 августа 2024, 10:57 #
                                                  Прочитайте комментарии в коде, там написано где указывается высота линии, поменяете значение, линия увеличится.
                                                Добавить комментарий