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

发布日期： 2024-11-03 阅读量： 作者： 网络

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

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

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

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

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

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

添加一个新的 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%;
}

# css

上一篇: linux的默认编码是什么

下一篇: Golang 函数并发编程如何实现高并发服务？

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

随便看看