在悬停时显示下划线的文本

Question

你可以使用css在悬停时强调文字吗？ （与链接的行为相似，但不是实际的链接。）

1. 您有以下文字Hello work
2. 当您将鼠标悬停在文本上时，它会使用css
为其加下划线

（文字不是链接）

Answer 1

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

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

Answer 2

您只需使用pseudo-class text-decoration: underline;指定:hover。

HTML

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

CSS

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

我已经开始了 Code Pen Demo 。

Answer 3

相当简单的过程我显然正在使用SCSS，但是您不必这样做，因为最终只是CSS！

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>