CSS：正確的方法使厚<a:hover>下劃線字體下劃線

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，但那並沒有解決它。

OPTION 2

背景圖像添加到您的a。