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

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

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

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

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

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

Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :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 (даже в последних версиях).

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

  1. Dimox, а можешь сделать раздвижку типа [текст]….[текст] – чтобы там где точечки раздвигалось? Как-то максимально компактно, чтобы не было лишней разметки.

  2. Спасибо! Очень помогла статья.

  3. добрый день. как сделать так же, только чтобы линия была вертикальной?

  4. Привет. Статья пригодилась. Сделал нечто подобное.

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