Как сделать двойное подчёркивание у центрированного заголовка без дополнительной обёртки?

Question

[Полина Емельянова]

В чём заковыка? А вот в линиях по длине контента (что делается inline-block), но главное - центрированием самого заголовка.
Можно ли это как-нибудь сделать без костылей в виде доп. обёрток?

Answer 1

[Сергей Горячев]

1. https://jsfiddle.net/n4g96zc0/ - но он немного не под стиль дизайна, сложно правильно подобрать размеры
2. https://jsfiddle.net/n4g96zc0/1/ - более адаптируемый вариант, где все размеры можно сделать в pixelperfect
3. https://jsfiddle.net/n4g96zc0/3/ - без использования флексов, но я такой вариант считаю устаревшим
4. https://jsfiddle.net/n4g96zc0/4/ - еще один вариант с использованием позиционирования

Comments

[Полина Емельянова]

Флексы - это круто... По ходу, если до утра не накумекаем что еще... Придется брать флексы.)) Я умею.) СПАСИБО!!!

[Сергей Горячев]

Полина Емельянова: Давно пора переходить. Не, ну правда есть еще вариант, сейчас набросаю.

[Сергей Горячев]

Полина Емельянова: https://jsfiddle.net/n4g96zc0/2/ без флексов.

[Полина Емельянова]

Sergey Goryachev: вот по чесноку... Я так и сделала.( Обидно, что потом у ОСТАЛЬНОГО контента надо text-align править...

[Полина Емельянова]

СПАСИБО!!!!

[Сергей Горячев]

Полина Емельянова: Могу упростить еще больше задачу)

[Сергей Горячев]

Полина Емельянова: Такой вариант? https://jsfiddle.net/n4g96zc0/4/

[Полина Емельянова]

Sergey Goryachev: *ржалКакКоньНапугалСоседей Я - лох!
КРУТО!!!!! Вот ее и возьму!!! Поклон в пояс!!!

Answer 2

[ant1vit]

border-bottom:3px double;

Comments

[Полина Емельянова]

Бордер-боттом растянется на всего родителя. А мне надо по контенту.

[Полина Емельянова]

codepen.io/emelyanova/pen/ZBNzXO

Answer 3

[mibo]

Оберните текст заголовка в span и для него пропишите border-bottom:3px double;

Comments

[Полина Емельянова]

Вопрос в том, что с доп оберткой это не проблема. Нужно бы без оной...
СПАСИБО!!!!