CSS: правильный способ сделать толстый <a:hover> подчеркнуть шрифты с большими descenders

Question

Я начинаю работать с CSS. В принципе у меня есть следующий HTML:

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

Я хочу иметь густое подчеркивание при наведении курсора на мои a тегов, но я использую специальный шрифт с большими подстрочными, поэтому, если я использую общий трюк для этого:

a:hover { 
text-decoration: none; 
border-bottom: 2px solid; 
padding: 0; 
margin: 0; 
} 

подчеркивание намного ниже базовой линии: Но я хочу, чтобы выглядеть следующим образом:

Я попытался сделать это следующим образом:

<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; 
} 

Но ширина подчеркивания одинакова для всех строк теперь:

Затем я добавил display: inline-block; для .over. Но я получил это:

Тогда я изменил inline-block к table, но подчеркивание снова значительно ниже:

я в конечном итоге добавив дополнительный span, так что теперь у меня есть:

<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; 
} 

И это дает мне, наконец, желаемое поведение (ширина подчеркивания настраивается на ширину строки и расположена близко к базовой линии). Но полезно ли вам добавить дополнительный span для этой цели? Разве это не выглядит взломанным?

Answer 1

A span - это бессмысленный тег, поэтому он не даст дополнительного «веса» вашему коду. Поэтому, имхо, это нормально использовать (но лучше избегать).

В качестве альтернативы вы можете сделать следующее:

<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; 
} 

И в DEMO.

Обратите внимание, что :after перекрывает a. Я пробовал добавить z-index, но это не исправить.

ВАРИАНТ 2

Добавить фоновое изображение в a.