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

Question

[EgorKubasov]

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

Отступы слева и справа статичные, а средняя линия в зависимости от длинны текста должна меняться. Подскажите, как реализовать?

Answer 1

[d4rkr00t]

Самый простой способ, как-то так: jsfiddle.net/JF38F/

С абсолютным позиционирование поверх линии

Comments

[EgorKubasov]

Большое спасибо!

[d4rkr00t]

да не за что)

[Nikiell]

Я специально зарегалась, чтобы сказать тебе спасибо

Answer 2

[Илья Шабанов]

kizu.ru/fun/legends-and-headings/

Answer 3

[Vorchun]

Еще вариант artgorbunov.ru/bb/soviet/20121115/

Answer 4

[Дмитрий]

stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line выбирайте что больше подуше

Answer 5

[AlexRas]

С помощью before и after.

Тут подробнее: frontblog.ru/verstka-zagolovoka-s-liniyami-po-boka...

Answer 6

[Александр]

использую такое:
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>

Comments

[Андрей Филимонов]

Зачем опечатка в ".lntxt:before,.lndot:after"?

Answer 7

[leutsky]

Проще так: cssdesk.com/M6WzU
А резину так: cssdesk.com/tRe9r