Fix broken <a> decoration with multiple spans

Question

So, i have

<a href="#">R<span class="superscript">5</span></a>

and the underline for my anchor is broken (meaning the underline for the R is at the baseline, and the underline for the 5 is in the middle of the R -- because the 5 is small), which i don't want. How do i get the anchor underline to be one unbroken line under both the R and the 5 (at the baseline)?

thanks.

Answer 1

I'm not sure if it would work or whether there are nicer solutions, but you can remove the underline and add a bottom-border to the a element.

Answer 2

It would help actually knowing what css is applied to both of those, but you can play around with the line-height property and explicitly define a consistent vertical-align value for both of those, if not you could try a bottom-border instead of text-decoration:underline.

a span.superscript { vertical-align:baseline; line-height:1; }

Edit: I'm not experiencing it @ http://jsbin.com/orudi

  <a href="#">R<sup>5</sup></a>

  <style>
      body { width:5em; margin:0 auto; font-size:100%; padding:5em 0 0; background:#000; }
      a { text-decoration:underline; color:#fff; font-size:5em; }
      a sup { vertical-align:top; font-size:xx-small; font-size:.5em; }
  </style>

Answer 3

You should be using the <sup> tag. This works fine for me:

<a href="#">R<sup>5</sup></a>

with

a { text-decoration: underline; }

I don't know how you're implementing superscript but I will mention a common reason people why people don't. They think it's deprecated like <b> (it isn't) or that it isn't semantic (it is).

Answer 4

ah, didn't know about <sup> actually :*) i was using .superscript { font-size:xx-small; vertical-align:top; }

If you wanted to use CSS for the superscript, you would need this:

.superscript {vertical-align:super;}

But, as pointed out by cletus, just go with the semantically correct and still in fashion use of the <sup> tag.

Answer 5

You could try this CSS I found, it prevents subscript and superscript from breaking your line-heights. It works for me.

sup, sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.75em; font-weight: normal; }
sub { top: 0.4em; }

Try the following chemical formulas:

MgNaA<sub>l5(</sub>Si<sub>4</sub>O<sub>10</sub>)<sub>3</sub>(OH)<sub>6</sub>

or

Radioactive Phosphorus-32 is <sup>32</sup>PO<sub>4</sub><sup>3-</sup>