75

Can you underline a text on hover using css? (Like the behavior of a link but not an actual link.)

  1. you have the following text Hello work
  2. when you hover your mouse over the text it underlines it using css

(the text is not a link)

2
  • 15
    There's nothing remotely unclear to me about the question. If this question is unclear to someone, it may be because they know nothing about CSS.
    – iconoclast
    Commented Oct 7, 2016 at 16:20
  • 3
    FWIW, I googled "css underline hover" and that's exactly how I got here, first result. :-) Commented Mar 30, 2022 at 18:11

6 Answers 6

162
<span class="txt">Some Text</span>

.txt:hover {
    text-decoration: underline;
}
0
28

You just need to specify text-decoration: underline; with pseudo-class :hover.

HTML

<span class="underline-on-hover">Hello world</span>

CSS

.underline-on-hover:hover {
    text-decoration: underline;
}

I have whipped up a working Code Pen Demo.

1
  • Devs may also want to combine this with the 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
13

Fairly simple process I am using SCSS obviously but you don't have to as it's just CSS in the end!

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);
        }   
    }   
}
1
  • 1
    This unlike the accepted answer works in the Edge browser! upvoted.
    – apena
    Commented Jun 13, 2020 at 18:26
3

li {
 display:inline-block;
 padding:15px;
}

li:hover {
  color: Blue;
  border-bottom: 3px solid Blue;
}
<ul>
  <li>Hello work</li>
 </ul>

2

.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>

1
<span class="text">Click Me</span>

.text:hover {
    text-decoration: underline black //This colour is an example
}
1
  • 1
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂
    – nima
    Commented Oct 14, 2021 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.