Hello. Is it possible to impose the following heading without js (the actual underlining of the rest of the line itself is of interest): enter image description here

The background of the title should be transparent. and I would like to do without nested spans, because I want to allow the content manager to add such headings to the text simply by selecting a class from the list.

  • "Is it possible to impose without js" and the tag "javascript" - and that is logical))) - Qwertiy ♦

4 answers 4

You can use the following solution:

.test:after { display: inline-block; width: 100%; border-bottom: solid 1px #000; content: ''; margin-top: 13px; margin-left: 3px; position: absolute; } span.test { display: block; position: relative; overflow: hidden; } 
 <span class="test">text</span>

In general, this is the same as in the response from Special, but it works with a header in several lines (the underlining is transferred to the bottom line) and does not add a scroll to the bottom.

Example here: http://jsfiddle.net/tk3bduop/3/

  • Damn, for sure, overflow: hidden because you can hang on the element itself) Thank you. - rebroff 4:05 pm

Much the same as @FAngel , but it may be a little easier:

 body { background: #ccc; } h1 { position: relative; color: brown; font: 20px sans-serif; text-transform: uppercase; overflow: hidden; } h1:after { content: ''; position: absolute; width: 100%; bottom: 0; border-bottom: 1px solid; } 
 <h1>Некий заголовок некоего раздела страницы</h1>

Demo: http://jsfiddle.net/2b225ehn/

    If I understood you correctly, then here is the solution http://jsfiddle.net/juttnayo/

    • This decision is obvious. It is necessary that the strip occupied the rest of the line, and not 100%. Rather, it does not entail a horizontal scroll. - rebroff 4:03 pm
    • It would be nice to duplicate pieces of code directly in the answer. If the link "dies" your answer will lose its meaning. - tutankhamun

    The title must fit in one line, otherwise scroll.
    http://jsfiddle.net/2s2nqdn7/

     <h1>Какой-то заголовок&#8239;</h1>

    How to get rid of the space for the indent is not invented. But the idea itself works without it.

     h1 { display: table-row; white-space: nowrap; } h1:after { content: ""; border-bottom: 1px solid; width: 100%; display: table-cell; position: relative; bottom: 8px; }