Good day,

There are headers, which are usually in 2 lines, these headers need to emphasize the bottom line.

<h3><a>Строка в две строчки</a></h3>

Suppose in this version, "two lines" is transferred and these words must be emphasized.

Naturally, the option to take the lower line in the additional tag does not fit, because it is all displayed automatically through the engine and adaptive layout.

 <h3><a>Строка в <span>две строчки</span></a></h3>

While only such a “crutch” came to mind, underline the tag a through the border, make the required line-height, and with the help of: before, close the first underline. This option works, but the problem is in the line-height and a large indentation between the lines to close the first border. ps line is centered! I hope not much namudril;)

  • one
    and so? jsfiddle.net/soledar10/qduceybp - soledar10
  • Oh, how, not a bad decision) But I forgot to add that the alignment is centered, that is, so jsfiddle.net/qduceybp/2 - lingvo
  • Here's another such option jsfiddle.net/x82cc6qf - checked only in Chrome - soledar10
  • The option is good and is supported by browsers more or less (first-line), but however the selection goes through the border (it needs dashed), or through the background and the dashed border image. In your version, unfortunately, you can only use text-decoration - lingvo
  • "While only such a crutch came to mind, underline the tag a through the border, make the required line-height, and with the help of: before, close the first underscore. This option works, but the problem is precisely the line-height and the large indent between the lines, to close the first border. "And if you don’t touch the line-height, then the distance between the lines is normal jsfiddle.net/b967g3tf/1 - Julia Petrishina

2 answers 2

https://jsfiddle.net/LL895spd/3/

 h3 { width: 100px; text-align: center; display: inline-block; position: relative; } h3 a:before { content:''; position:absolute; width:100%; height:100%; left:0; top:-1px; background:#fff; } h3 a span{ position:relative; } a { border-bottom: 1px dashed #000; text-decoration: none; }

Hurray!) It turned out to be done, without duplicates, etc.) As I used to before, I didn’t make such a decision) Thanks to everyone!) Ihhaman - thank you! Gave me the idea of ​​this)

    I propose to underline directly the entries themselves, and for reference to remove the standard underscore.

     h3 { display: inline-block; border-bottom: solid 1px blue; } a { text-decoration: none; }

    Example: https://jsfiddle.net/nk96jmd5/

    • if the last word is not the entire length of the line, then the underscore will go beyond the word - lexxl
    • Yes, and transfer using br is not an option, because it is displayed through the engine and it is not known in advance where to transfer, if it could have been done this way, then the second line in <span> </ span>) is simpler) and to make styles for it) - lingvo
    • br was given for transfer example. Given the additional conditions, you can output two identical tags a and get what you need. Yes, the decision is terrible, but it works. jsfiddle.net/r9gro9vt/2 - ihhaman
    • I had such an idea, but this option is very terrible) In h3, duplicate, I think, search engines will not approve) Regarding the first option, I agree with lexxl, not always the first line is less than the second - lingvo
    • one
      A better option with one tag, but duplication of the link text in the data parameter: jsfiddle.net/LL895spd/1 - ihhaman