Dashed линия для заголовка. Как сверстать?

[ya_verstaka]

Здравствуйте, уважаемые форумчане! Подкиньте пожалуйста идею, как сверстать такой вот заголовок, чтобы было гибко (не зависело от текста):  ссылка на картинку

[Bloomerwd]

https://jsfiddle.net/BloomerWD/2khmh59m/

Думаю можно просто использовать как заголовок, ну или же просто помещать нужное содержимое в fieldset, после legend. К примеру, как описание на скриншоте.

[Igor Schnaider]

http://codepen.io/anon/pen/LGOvNY

[Bloomerwd]

http://codepen.io/anon/pen/LGOvNY

Кроссбраузерность.. IE 8+

[ya_verstaka]

http://codepen.io/anon/pen/LGOvNY

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

 

P.S Я изначально сделал на js, ну решение на css очень понравилось, буду использовать его.

Edited January 20, 2016 by ya_verstaka

[Bloomerwd]

[VeniVidiVici]

https://jsfiddle.net/BloomerWD/2khmh59m/

Думаю можно просто использовать как заголовок, ну или же просто помещать нужное содержимое в fieldset, после legend. К примеру, как описание на скриншоте.

 

Извините за глупый вопрос, к примеру код:

<section>  <fieldset>    <legend><h2>заголовок 2 уровня</h2></legend>  </fieldset>  здесь какой-то контент</section>

по смыслу, заголовок 2 уровня будет относится к section?

Edited January 22, 2016 by VeniVidiVici

[Нарек]

Нельзя засовывать заголовок в legend.

[Int]

Лично я делаю такое флексами. У нас в конторе можно, мы не верстаем под IE.