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

但是现在所有字符串的下划线宽度都是相同的：

​

然后我为.over添加了display: inline-block;。但我得到了这个：

​

然后我将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

span是一个没有意义的标签，所以它不会给你的代码增加额外的“权重”。因此，imho，使用它是可以的(但最好避免使用)。

或者，您可以执行以下操作：

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

还有一台。

请注意，:after与a重叠。我尝试添加一个z-index，但是没有解决这个问题。

选项2

给你的a添加一个背景图片。