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

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

Комментарии (32)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
    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. крутое решение! спасибо

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

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

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

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

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

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