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

[Crystal-3]

Всем привет)

Есть заголовок, по центру горизонтальная линия. Пока он помещается в одну строку - всё хорошо, проблемы с длинным заголовком: http://jsfiddle.net/d7u6Lcf8/

Согласно дизайна должно быть так: http://clip2net.com/s/3khqHjc

Ребят, подскажите, реально ли так сверстать или это мечты дизайнера?

Edited July 5, 2015 by Crystal-3

[wwt]

Для того чтобы линия позиционировалась не относительно высоты блока родителя, а относительно последней строки текста (визуально), нужно задать ей позиционирование снизу, а не сверху, и не в процентах, а равное половине line-height;  У вас line-height равен 1.2 , а font-size равен 30, значит нужно 18px; . Ну и чтобы линия визуально была относительно символов в нижнем регистре я бы вычел пару пикселей. то есть вот так:

.content-title span:after {	content:'';	width:970px;	height:1px;	background: #282828;	position:absolute;	bottom:16px;	margin-left: 10px;}

[Crystal-3]

Спасибо Вам огромное! А я уже решила, что так сделать невозможно

[wwt]

Очень возможно и даже вот вам еще один вариант http://jsfiddle.net/d7u6Lcf8/2/но его можно использовать только там где цвет фона текста однороден и известен. Главное не забывать и в первом и втором случае линия позиционируется жестко. то есть если будете менять размер шрифта и высоту строк то придется менять координаты линии.

[Crystal-3]

О, супер, спасибо) Тоже очень интересный вариант

[psywalker]

А мы ещё и так умеем здесь. Украдено отсюда.