html – CSS:为具有大下划线的字体制作粗下划线的正确方法

我是CSS初学者.基本上我有以下html:

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

我想在悬停我的标签时有一个粗的下划线,但是我使用带有大下划线的自定义字体,所以如果我使用常见技巧:

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; for .over.但我得到了这个:

然后我将inline-block更改为table,但下划线再次远远低于:

我最后添加了一个额外的跨度,所以现在我有:

<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是一个无意义的标记,因此它不会给代码带来额外的“权重”.因此,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;
}

一个DEMO.

请注意:之后重叠a.我已经尝试添加z-index,但这并没有解决它.

方案2

在a中添加背景图片.

转载注明原文:html – CSS:为具有大下划线的字体制作粗下划线的正确方法 - 代码日志