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

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

问题所描述的悬停效果可以通过 css 的 :after 伪元素实现。然而，在原始代码中，当

元素内容太长时，只能显示一行下划线。

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

1. 在

   元素的 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: 00%;
   }
   .test:hover {
    background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 00%;
   }

   登录后复制
3. 在

   元素中添加 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: 00%;
}
.test:hover {
    background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 00%;
}

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

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