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

Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство.

Выглядит это следующим образом (живой пример):

Заголовок с выравниванием слева
Заголовок с выравниванием по центру
Заголовок с выравниванием справа

Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа.

Однако, эту задачу можно решить и другим, более красивым способом — использовав всего один тег. Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег.

Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after.

Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:

.title {
	/* чтобы линии не выходили за ширину блока заголовка */
	overflow: hidden;
}
.title:before,
.title:after {
	content: '';

	/* делаем линию строчно-блочной */
	display: inline-block;

	/* выравниваем вертикально по середине */
	vertical-align: middle;

	/* не позволяем ширине превысить 100% (будет добавлен бордюр) */
	box-sizing: border-box;

	/* установка ширины в 100% делает линию равной ширине тега заголовка
	** благодаря этому линия заполнит все свободное пространство
	** слева и справа от текста
	*/
	width: 100%;
	height: 3px;
	background: #6CBD83;

	/* добавляем к линии левый и правый бордюр цветом основного фона заголовка
	** благодаря этому создается нужный отступ между линиями и текстом
	*/
	border: solid #FFF;
	border-width: 0 10px;
}
.title:before {
	/* смещаем левую линию влево отрицательным отступом, равным 100% ширины
	** благодаря этому линия встает слева от текста
	*/
	margin-left: -100%;
}
.title:after {
	/* смещаем правую линию вправо отрицательным отступом, равным 100% ширины
	** благодаря этому линия встает справа от текста
	*/
	margin-right: -100%;
}

Вот таким хитрым кодом это и делается.

У меня есть еще один аналогичный вариант решения данной задачи — через абсолютное позиционирование псевдоэлементов :before и :after. Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).

Комментарии (25)
  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

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

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