
css 悬停效果:多行文本下划线
当前的 css 悬停效果只能在一行文本下应用下划线。如果我们想要为每一行文本添加下划线,我们需要对代码进行一些调整。
修改后的 css 如下:
.test {
display: inline;
transition: all .5s;
background: linear-gradient(270deg, #00000036, #00ff53cf) 0 0;
background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0% 100%;
background-size: 0% 2px;
}
.test:hover {
background: linear-gradient(270deg, #00000036, #00ff53cf) 0 0;
background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0% 100%;
}通过应用 inline 属性和线性渐变背景,下划线现在可以跨越整个
标签,包括多行文本。当悬停时,下划线将从 0% 扩展到 100%,从而创建一个完整的下划线效果。










