Can you underline a text on hover using css? (Like the behavior of a link but not an actual link.)
- you have the following text Hello work
- when you hover your mouse over the text it underlines it using css
(the text is not a link)
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)
You just need to specify text-decoration: underline;
with pseudo-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.
text-decoration-color
CSS property to override the default blue appearance and match the color to the text you are underlining
Commented
Aug 6, 2022 at 14:30
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
}