Верстка заголовка с горизонтальной линией слева и справа от текста

Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример): Заголовок с выравниванием слева Заголовок с выравниванием по центру Заголовок с выравниванием справа Раньше для ...

Комментарии (31)
  1. 1
    Aлекаcей

    Спасибо! Просто, красиво и практично!

  2. 3

    Я раньше как-то не думал о пустых местах после моих заголовков на блоге, но они реально остаются. Наверное сделаю себе такую линию или придумаю, что-то более привлекательное. Спасибо автору за мысль!

  3. 4

    Вот здесь много всего, и Ваше тоже — https://davidtheclark.github.io/scut/.

  4. 5

    Делал что-то похожее с помощью line-height и position relative на белом фоне с border-bottom, но это не гарантировало точность для Safari и занимало один лишний тег внутри заголовка. Спасибо за способ с псевдо-элементами.

  5. 6

    Спасибо за классную статью, и отдельное сенкс за код !!! который работает =)

  6. 7
    ASCII

    Автор, не подскажете, как реализовать то же самое, только для заголовком h2-h3 например ?
    Вставляю такую код:

    <div class="title"><h2>Заголовок с выравниванием слева</h2></div>

    И все сбивается.

  7. 10

    А если внутри h1 поставить span и ему дать background-color: #fff; position: relative; а h1:before просто выровнять по вертикали и на всю ширину, получится тот же эффект. Или же нежелательно ставть внутри заголовка span?

  8. 13

    В белом цвете шикарно смотрится.

  9. 14
    Александр

    Если заголовок будет состоять из нескольких строк (например если разбить тегом br), то линии будут показываться не корректно.

  10. 16
    Max

    Благодарю от души! Чудесно работает :)

  11. 17
    MakeUpMan

    Спасибо выручили, быстро и самое главное просто! работает как часики

  12. 18
    Ant

    Спасибо, отличное решение

  13. 19
    dzmitry1985

    Классная статья.
    Да и сайт классный! Особенно дизайн нравится. Очень симпатично выглядит

  14. 20
    asdasd

    не понимаю зачем нужны

    box-sizing: border-box;
    border: solid #FFF;
    border-width: 0 10px;
    

    Из комментариев к коду, понял что это создаёт отступы от текста до линии, но я сделал таким способом.

    		.content p::before {
    			margin-left: -100%;
    			margin-right: 20px;
    		}
    		.content p::after {
    			margin-right: -100%;
    			margin-left: 20px;
    		}
    

    В чём разница подходов ? Какой метод более приемлем в обращении ?

  15. 22
    Андрей

    крутое решение! спасибо

  16. 23

    Здравствуйте. У меня при использовании стилей заголовок отображается «приклеенным» к левой стороне (сразу текст и правая линия до конца блока), левый отрезок появляется лишь немного при исключении из кода box-sizing. В чем может быть причина?

  17. 24
    Екатерина

    Спасибо, отличное решение.

  18. 25

    С заголовком бывают проблемы при вёрстке. Нужно внимательнее проверять, когда его пишите

  19. 26

    Спасибо большое за полезную статью. Очень помогла.

  20. 27
    Ярослав
    @

    Здравствуйте, я не понимаю как сделать, чтобы текст оказался посередине (пример 2)

Ваш комментарий