Can you underline a text on hover using css? (Like the behavior of a link but not an actual link.)
(the text is not a link)
<span class="txt">Some Text</span>
.txt:hover {
text-decoration: underline;
}
You just need to specify text-decoration: underline;
withpseudo-class :hover
.
<span class="underline-on-hover">Hello world</span>
.underline-on-hover:hover {
text-decoration: underline;
}
I have whipped up a working Code Pen Demo .
Fairly simple process I am using SCSS obviously but you don't have to as it's just CSS in the end!
<span class="menu">Menu</span>
.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);
}
}
}
li { display:inline-block; padding:15px; } li:hover { color: Blue; border-bottom: 3px solid Blue; }
<ul> <li>Hello work</li> </ul>
.resume_link:hover{ text-decoration: underline; text-decoration-color: rgb(250, 114, 64); -moz-text-decoration-color: rgb(250, 114, 64); text-decoration-thickness: 5px; }
<a class="resume_link">Resume</a>
<span class="text">Click Me</span>
.text:hover {
text-decoration: underline black //This colour is an example
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.