Html 悬停时显示下划线的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22674633/
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
Text that shows an underline on hover
提问by Lacer
Can you underline a text on hover using css? (Like the behavior of a link but not an actual link.)
您可以使用 css 在悬停时为文本加下划线吗？（就像链接的行为，但不是实际链接。）
- you have the following text Hello work
- when you hover your mouse over the text it underlines it using css
- 你有以下文字你好工作
- 当您将鼠标悬停在文本上时，它会使用 css 给它加下划线
(the text is not a link)
（文字不是链接）
回答by effone
<span class="txt">Some Text</span>
.txt:hover {
text-decoration: underline;
}
回答by ryanwinchester
You just need to specify text-decoration: underline;with pseudo-class:hover.
你只需要指定text-decoration: underline;与伪类:hover。
HTML
HTML
<span class="underline-on-hover">Hello world</span>
CSS
CSS
.underline-on-hover:hover {
text-decoration: underline;
}
I have whipped up a working Code Pen Demo.
我已经创建了一个有效的Code Pen Demo。
回答by John Downs
Fairly simple process I am using SCSS obviously but you don't have to as it's just CSS in the end!
相当简单的过程我显然正在使用 SCSS，但您不必这样做，因为它最终只是 CSS！
HTML
HTML
<span class="menu">Menu</span>
SCSS
社会保障局
.menu {
position: relative;
text-decoration: none;
font-weight: 400;
color: blue;
transition: all .35s ease;
&::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: yellow;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
&:hover {
color: yellow;
&::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
