就像问题一样,我有一个代码
如何使此效果在许多文本行上起作用,而不是像现在这样 - 该效果仅出现在 1 个文本行中,例如2 行文本(如示例)
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none; /* For Example */
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--00a3a3);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>
最佳答案
将背景与box-decoration-break
结合使用,在每一行上产生重复的效果
:root {
--00a3a3: #00a3a3;
}
a {
text-decoration: none;
background:linear-gradient(var(--00a3a3),var(--00a3a3)) bottom center no-repeat;
background-size:0% 2px;
transition: all 0.3s ease-in-out 0s;
/* Remove the below to see the diffrence */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
a:hover{
background-size:100% 2px;
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>
关于css - :before 上的多行链接动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60002918/