CSS: correct way to make thick <a:hover> underline for fonts with big descenders

css, fonts, html, underline

Solution

A `span` is a meaningless tag, so it won't give extra 'weight' to your code. Therefor, imho, it is okay to use it (but better to avoid).

Alternatively you could do the following:

<ul>
    <li><a href="news.html">О нас</a></li>
    <li><a href="#">Галерея</a></li>
</ul>

a {
    font-size: 30px;
    text-decoration: none;
    position: relative;
}
a:hover:after {
    content: "";
    border-bottom: 2px solid #ec6713;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
}

And a DEMO.

Please note that the `:after` is overlapping the `a`. I've tried adding a `z-index`, but that didn't fix it.

OPTION 2

Add a background-image to your `a`.

Problem

I'm a CSS-beginner. Basically I have the following html: ``` <ul> <li><a href="news.html">О нас</a></li> <li><a href="#">Галерея</a></li> </ul> ``` I want to have a thick underline when hovering my `a` tags, but I use a custom font with big descenders, so if I use the common trick for this: ``` a:hover { text-decoration: none; border-bottom: 2px solid; padding: 0; margin: 0; } ``` The underline is far below the base line: But I want it to look like this: I tried to do it like this: ``` <ul> <li class="over"><a href="news.html">О нас</a></li> <li class="over"><a href="#">Галерея</a></li> </ul> .over{ font-size: 30px; height:30px; // makes the text overlap this element overflow:visible; } .over:hover { border-bottom: 2px solid #ec6713; } ``` But the width of the underline is the same for all the strings now: Then I added `display: inline-block;` for `.over`. But I got this: Then I changed `inline-block` to `table`, but the underline is again far below: I ended up adding an extra `span`, so now I have: ``` <ul> <li><span class="over"><a href="news.html">О нас</a></span></li> <li><span class="over"><a href="#">Галерея</a></span></li> </ul> .over{ font-size: 30px; height:30px; // makes the text overlap this element overflow:visible; display:inline-block; } .over:hover { border-bottom: 2px solid #ec6713; } ``` And this gives me finally the desired behaviour (the underline width is adjusted to the string width, and it's positioned close to the baseline). But is it a good practice to add an extra `span` for this purpose? Doesn't it look hacky?

Original source