css - :before 上的多行链接动画

Question

就像在问题中一样，我有一个代码

如何使这种效果在许多文本行上起作用，而不是像现在这样 - 效果仅出现在例如 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>

标签： cssanimation

Answer 1

使用背景结合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>