Как сделать линии до и после текста в html css (картинка прилагается)?

Здравствуйте!
Задался вопросом как сделать такую вещь:

Отступы слева и справа статичные, а средняя линия в зависимости от длинны текста должна меняться. Подскажите, как реализовать?
  • Вопрос задан
  • 79273 просмотра
Решения вопроса 1
d4rkr00t
@d4rkr00t
Самый простой способ, как-то так: jsfiddle.net/JF38F/

С абсолютным позиционирование поверх линии
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Ответ написан
Комментировать
Vorchun
@Vorchun
Еще вариант artgorbunov.ru/bb/soviet/20121115/
Ответ написан
Комментировать
Dimitriys
@Dimitriys
Ответ написан
Комментировать
@AlexRas
С помощью before и after.

Тут подробнее: frontblog.ru/verstka-zagolovoka-s-liniyami-po-boka...
Ответ написан
Комментировать
использую такое:
CSS
.center{margin:0 auto;text-align:center} /*если нужно центровать */
.lntxt {overflow:hidden}
.lntxt:before,.lndot:after {
	content:'';display:inline-block;vertical-align:middle;
	box-sizing:border-box;width:100%;height:2px;
	background:rgb(230,235,235); 
	border:solid #FFF;
	border-width:0 .5em 0;
}
.lntxt:before {margin-left:-100%}
.lntxt:after {margin-right:-100%}

HTML
<h2 class="center lntxt">ЗАГОЛОВОК «ПО ЦЕНТРУ»</h2>
<h3 class="lntxt">ЗАГОЛОВОК «СЛЕВА»</h3>
Ответ написан
leutsky
@leutsky
Проще так: cssdesk.com/M6WzU
А резину так: cssdesk.com/tRe9r
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы