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

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

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

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

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

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

   

   一览运营宝

   一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

   41

   查看详情

   .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%;
}

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

以上就是如何让悬停的文本每一行都出现下划线？的详细内容，更多请关注php中文网其它相关文章！