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。