如何让悬停的文本每一行都出现下划线？

知识点掌握了，还需要不断练习才能熟练运用。下面米云给大家带来一个文章开发实战，手把手教大家学习《如何让悬停的文本每一行都出现下划线？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

悬停时，如何让文本每一行都出现线条？

问题所描述的悬停效果可以通过 css 的 :after 伪元素实现。然而，在原始代码中，当 <p> 元素内容太长时，只能显示一行下划线。

为了让每一行文本在悬停时都能出现下划线，需要对 css 代码进行修改。

1. 在 <p> 元素的 display 属性中添加 inline 值，使其可以在同一行显示文本。

2. 添加一个新的 css 类 test，并为其设置以下样式：

   .test {
    display: inline;
    transition: all .5s;
    background: linear-gradient(270deg, #00000036, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
   }
   .test:hover {
    background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
   }

3. 在 <p> 元素中添加 test 类。

修改后的代码如下：

<p class="test">
    这是一段测试文本 这是一段测试文本 这是一段测试文本
    这是一段测试文本 这是一段测试文本 这是一段测试文本
    这是一段测试文本 这是一段测试文本 这是一段测试文本
    这是一段测试文本 这是一段测试文本 这是一段测试文本
    这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>

.test {
    display: inline;
    transition: all .5s;
    background: linear-gradient(270deg, #00000036, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
}
.test:hover {
    background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
}

现在，每一行文本在悬停时都会出现下划线。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持米云！更多关于文章的相关知识，也可关注米云公众号。

如何在 CSS 媒体查询中去除背景图效果？