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

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

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

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

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

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