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

Question

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?

Answer 1

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.