悬停时显示下划线的文本

Question

你能使用CSS在鼠标悬停时给文本添加下划线吗？(类似于链接的行为，但不是实际链接。)

1. 你有以下文本 Hello work
2. 当你将鼠标悬停在文本上时，使用CSS给它添加下划线

(该文本不是链接)

- Lacer

---

我对这个问题一点也不觉得含糊。如果这个问题对某些人来说不清楚，可能是因为他们对 CSS 一无所知。 - iconoclast

顺便说一句，我谷歌搜索了“css下划线悬停”，这就是我找到这里的方式，第一个结果。 :-) - Joel Wigton

Answer 1

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

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

- effone

Answer 2

您只需在伪类:hover中指定text-decoration: underline;即可。

HTML

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

CSS

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

我已经制作了一个可运行的Code Pen Demo。

- ryanwinchester

---

开发人员可能还想将此与 text-decoration-color CSS 属性结合使用，以覆盖默认的蓝色外观，并将颜色与您要下划线的文本匹配。 - AuthorOfTheSurf

Answer 3

我正在使用相当简单的过程，显然我正在使用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);
        }   
    }   
}

- John Downs

---

这个答案不同于被接受的答案，可以在Edge浏览器中正常工作！已点赞。 - apena

Answer 4

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

li:hover {
  color: Blue;
  border-bottom: 3px solid Blue;
}

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

- Priyanka Vadhwani

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>

- Agatha Ambrose

Answer 6

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

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

- RaLe

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。您可以在帮助中心找到有关编写良好答案的更多信息：https://stackoverflow.com/help/how-to-answer。祝你好运！ - nima