<sup> in underline element

Question

I have a style-emphasized element.

There is a ^TM element in the link.

Is it possible to make underline at the bottom of the whole reason for a word right now, there is a line break and underline in the sup element above.

thanks for the help

Answer 1

<u>This is some text for Brand Name&trade; to test the error.</u>

It works. I cannot recreate your mistake.

EDIT Good, my bad, ”I replied, not using the <sup> element. If you use a trademark marker (& trade;), it’s better to just use the HTML expression for it, which ™ - use it directly in the text.

As for your question, you really have two options.

CSS

 sup { padding-bottom: 4px; border-bottom: 1px solid black; } 

* You may need to adjust the padding-bottom value depending on the height of your line.

HTML

<u>This is a Brand</u><sup>for a company</sup><u> and then some more text</u>

---

or, the version of Lollero (changed to work in a line) ...

CSS

div.underline { display: inline; padding-bottom: 1px; border-bottom: 1px solid #222; }

HTML

<div class="underline">what'<sup>s UP</sup></div>

Answer 2

Guess that they won’t notice this, but it works on FF, IE8 and higher, unfortunately, not in chrome:

font size: 60%; vertical-align: top;

Answer 3

If you wrap the text underlined in the outer element, you can do something like this:

http://jsfiddle.net/j2F84/1

HTML:

 <div>what'<sup>s UP</sup></div> 

CSS

 div { border-bottom: 1px solid #222; float: left; } 

Answer 4

There is no simple solution to this problem (there always seems to be a situation that needs to be fixed).

For me, I preferred to do it this way (works with a wrapper)

HTML:

 <span class="u2"> Registered<sup>&reg;</sup> </span> 

CSS

 .u2{ border-bottom:2px solid #666666;display:inline; } sup{ font-size: 40%; display: inline; vertical-align: top; } 

https://jsfiddle.net/sLtkx2qe/