html - CSS:为大下行字体制作厚 下划线的正确方法

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 是一个无意义的标签，因此它不会给您的代码带来额外的“重量”。因此，恕我直言，可以使用它(但最好避免使用)。

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

<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。