[英]CSS: correct way to make thick <a:hover> underline for fonts with big descenders
I'm a CSS-beginner. 我是CSS初学者。 Basically I have the following html: 基本上我有以下html:
<ul>
<li><a href="news.html">О нас</a></li>
<li><a href="#">Галерея</a></li>
</ul>
I want to have a thick underline when hovering my a
tags, but I use a custom font with big descenders, so if I use the common trick for this: 我想在悬停我a
标签时有一个粗的下划线,但是我使用带有大下划线的自定义字体,所以如果我使用常见技巧:
a:hover {
text-decoration: none;
border-bottom: 2px solid;
padding: 0;
margin: 0;
}
The underline is far below the base line: 下划线远低于基线: But I want it to look like this: 但我希望它看起来像这样:
I tried to do it like this: 我试着这样做:
<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;
}
But the width of the underline is the same for all the strings now: 但是现在所有字符串的下划线宽度都是相同的:
Then I added display: inline-block;
然后我添加了display: inline-block;
for .over
. for .over
。 But I got this: 但我得到了这个:
Then I changed inline-block
to table
, but the underline is again far below: 然后我将inline-block
更改为table
,但下划线再次远远低于:
I ended up adding an extra span
, so now I have: 我最后添加了一个额外的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;
}
And this gives me finally the desired behaviour (the underline width is adjusted to the string width, and it's positioned close to the baseline). 这最终给了我所需的行为(下划线宽度调整为字符串宽度,并且它位于接近基线的位置)。 But is it a good practice to add an extra span
for this purpose? 但为此目的增加额外的span
是一个好习惯吗? Doesn't it look hacky? 它不看起来很黑吗?
A span
is a meaningless tag, so it won't give extra 'weight' to your code. span
是一个无意义的标记,因此它不会给代码带来额外的“权重”。 Therefor, imho, it is okay to use it (but better to avoid). 因此,imho,可以使用它(但最好避免)。
Alternatively you could do the following: 或者,您可以执行以下操作:
<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;
}
Please note that the :after
is overlapping the a
. 请注意:after
重叠a
。 I've tried adding a z-index
, but that didn't fix it. 我已经尝试添加z-index
,但这并没有解决它。
OPTION 2 方案2
Add a background-image to your a
. 背景图像添加到您的a
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.