悬停时显示下划线的文本

Question

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)

Answer 1

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

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

Answer 2

You just need to specify text-decoration: underline; withpseudo-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 .

Answer 3

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);
        }   
    }   
}

Answer 4

 li { display:inline-block; padding:15px; } li:hover { color: Blue; border-bottom: 3px solid Blue; }

 <ul> <li>Hello work</li> </ul>

Answer 5

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

Answer 6

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

.text:hover {
    text-decoration: underline black //This colour is an example
}