CODEWITHSUNDEEP
htmlcss
gruber
gruber

Reputation: 29717

<sup> in a element with underline

Ive got a element with styling underline.

In the link there is TM element.

Is it possible to make underline at the bottom of all word cause right now there is a break in line and underline in sup element is higher.

Thank for help

Upvotes: 4

Views: 5017

Answers (4)

Sidupac
Sidupac

Reputation: 671

There is no easy solution to this problem (seems there's always a situation that requires some fiddling to fix).

For me I preferred to do it this way (works with wrap)

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/

Upvotes: 0

haraise
haraise

Reputation: 141

Guess this will not get noticed, but it's working on FF, IE8 and above, sadly not in chrome:

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

Upvotes: 2

user926352
user926352

Reputation:

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

That works. I cannot recreate your error.

EDIT Okay, my bad - I answered without using the <sup> element. If you're just using the Trademark (™) marker, it's better to just use the HTML expression for that, which is &trade; - use that directly in your text.

Regarding 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 your line height.

HTML

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

or, Lollero's version (modified to work in line)...

CSS

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

HTML

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

Upvotes: 5

Joonas
Joonas

Reputation: 7303

If you wrap the text to be underlined in 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; }

Upvotes: 1

Related Questions