CSS 悬停时加粗下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24647139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Thick underline when hover
提问by Tiffany
I'm trying to create a thick underline when the mouse hover over the word (For Navigation Bar). But I noticed that the underline is much longer than the word & there's huge gap between the word and the underline. How can make the underline the same length as the word (similar to text-decoration: underline) and also a small gap.
当鼠标悬停在单词上时，我试图创建一个粗下划线（对于导航栏）。但是我注意到下划线比单词长得多，并且单词和下划线之间存在巨大差距。如何使下划线与单词的长度相同（类似于text-decoration: underline）并且还有一个小的间隙。
Below is my code and an image of the outcome.
下面是我的代码和结果的图像。
nav > ul > li:hover > a {
border-bottom: 2px solid #F117B4;
text-decoration: none;
}
This is the whole code for the navigation bar.
这是导航栏的全部代码。
nav { font-family: Open Sans Condensed; letter-spacing: 1px; }
nav { position: relative; border-bottom: 1px {{ settings.border_style }} {{ settings.border_color }}; /*border-top: 1px {{ settings.border_style }} {{ settings.border_color }};*/ }
nav > ul > li { margin-bottom: 0; }
nav > ul > li > a { text-decoration: none; color: {{ settings.nav_link_color }}; display: block; padding: 0 15px; font-size: 17px/*font-size: {{ settings.nav_font_size }}*/;
line-height: {{ settings.nav_line_height }}; height: {{ settings.nav_line_height }}; font-weight: {{ settings.nav_weight }}; text-transform: {{ settings.nav_font_style }}; }
nav > ul > li > a.current { color: {{ settings.selected_nav_link_color }}; }
nav > ul > li:hover > a { display:inline; border-bottom: 2px solid #F117B4; color: {{ settings.nav_link_hover_color }}; text-decoration: none; }
nav > ul > li.dropdown { position:relative; }
nav > ul > li.dropdown > .dropdown { background: {{ settings.nav_dropdown_background_color }}; list-style: none outside none; padding: 5px 15px; display: none; position: absolute; min-width: 180px; z-index: 99999; top: 100%; left: 0%; margin-left: 15px; border: 1px solid {{ settings.border_color }}; }
nav > ul > li.dropdown:hover > .dropdown { display: block; z-index: 999999; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10); box-shadow:0 0 3px rgba(0, 0, 0, 0.10); }
nav > ul > li.dropdown li { list-style: none; font-size: 13px; line-height: 30px; }
Hi, anyone has a solution for this? :( Please help me. Thanks.
嗨，有人有解决方案吗？:(请帮帮我。谢谢。
回答by Himanshu Tyagi
UPDATE
- Underline exactly as the size of word.
- Distance of underline and word reduced. Achieved using pseudo-element.
更新
- 下划线与单词的大小完全一致。
- 下划线和单词的距离减少。使用伪元素实现。
Here's the jsfiddle : http://jsfiddle.net/e79gV/1/
这是 jsfiddle：http: //jsfiddle.net/e79gV/1/
css
css
nav > ul > li > a {
text-decoration: none;
}
.border{
position:relative;
}
.border:hover::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom:0px; /*Change this to increase/decrease distance*/
border-bottom: 2px solid #000;
}
html
html
<nav>
<ul>
<li><a class="border" href="#">M</a>
</li>
<li><a class="border" href="#">Menu</a>
</li>
<li><a class="border" href="#">Menu Item</a>
</li>
</ul>
</nav>
Underlines are exactly of the same length as word.
下划线的长度与单词完全相同。
Some Refs that might help :
一些可能有帮助的参考资料：
https://stackoverflow.com/a/12804469/3603806
回答by Mike Ante
use a:hoverinstead of li:hoverThat should solve the issue of having overlapping underline.
使用a:hover而不是li:hoverThat 应该可以解决重叠下划线的问题。
<style>
nav > ul > li > a:hover {
border-bottom: 2px solid #F117B4;
text-decoration: none;
}
</style>
<nav>
<ul>
<li>
<a>hello</a><!--use   for line overlapping -->
</li>
</ul>
</nav>
回答by Mike Ante
Hey a little late but I got this to work. The thickness of the underline that you're looking for needs to be done via the border-bottom-style property.
嘿有点晚了，但我得到了这个工作。您正在寻找的下划线的粗细需要通过border-bottom-style property.
the two elements to target are li:hoverand a:hover, depending on which one you use. check out the jsfiddle https://jsfiddle.net/14umqLrr/.
要定位的两个元素是li:hover和a:hover，具体取决于您使用的是哪一个。查看 jsfiddle https://jsfiddle.net/14umqLrr/。
Also you can use the outline-offset:property to offset the border to be closer or further away from your nav bar text.
您也可以使用该outline-offset:属性将边框偏移到离导航栏文本更近或更远的位置。
