这是我的代码：
<!DOCTYPE html>
<style>
a.nice-link {
position: relative;
color: #71ad37;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 200%;
height: 20%;
width: 0;
max-width: 200%;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
li {
display: inline-block;
}
.try{
width: 50px;
}
</style>
<div class = "try"><a class="nice-link" href=“http://katoliiklased.blogspot.com/2018/08/katekismuse-surmanuhtlust-kasitlev-uus.html“ data-text="Hello Bello Sello" target="_blank">Hello Bello Sello</a>
</div>
代码的要点是：如果将鼠标悬停在链接上，它将使过渡进入工作，以便文本从左到右突出显示。
如果有一行文本，它可以正常工作。但如果有更多，则过渡仅在第一行有效。
如何使其也适用于其他行？要么 1( 过渡从第一行开始，然后继续到其他行，要么 2( 文本将作为一个整体过渡，所有行同时从左到右
感谢您的帮助！
只需删除a.nice-link:after样式的white-space: nowrap;即可。
在这里测试它.. https://jsfiddle.net/nimittshah/aqd6ev39/1/