就像在问题中,我有一个代码
如何使这种效果在许多文本行上起作用,而不是现在那样-效果仅出现在2条文本行中的1条(例如示例)
: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>
摆脱困境::before
。相反,应用background-image
到<a>
。
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none; /* For Example */
background-image: linear-gradient(#00a3a3, #00a3a3);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:hover {
background-size: 100% 2px;
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>
编辑:
问题是:before
伪元素不知道您<a>
是两行。它只是在其中添加一个新的块元素,并采用您给定的形状。
如果您知道链接将始终为两行,则可以:after
在第二行中使用an来摆脱这种情况,如下所示:
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none;
/* For Example */
}
a:before,
a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
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:before {
bottom: 0;
}
a:after {
bottom: 1em;
}
a:hover:before,
a:hover:after {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>
(但您最好重组代码以删除:before
。)
我已经在几页上看到了这种效果。我在某些元素中阻止了它。
element a:before {visibility: hidden;}
。完全重写代码将花费很多时间,所以我的问题是:是否可以在上面进行重写visibility
?@MAJO请参阅我的最新答案。
您的编辑确实对我有帮助,谢谢:)