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

概述我是CSS初学者.基本上我有以下html： <ul><li><a href="news.html">О нас</a></li><li><a href="#">Галерея</a></li></ul> 我想在悬停我的标签时有一个粗的下划线,但是我使用带有大下划线的自定义字体,所以如果我使用常见技巧： a:hover {text-decoration: none;border-botto 我是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 ><a href="news.HTML">О нас</a></li>    <li ><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 ><a href="news.HTML">О нас</a></span></li>    <li><span ><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：为具有大下划线的字体制作粗下划线的正确方法全部内容，希望文章能够帮你解决html – CSS：为具有大下划线的字体制作粗下划线的正确方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。