css - 如何在多行上扩展 css 文本动画？

这是我的代码:

<!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/

关于css - 如何在多行上扩展 css 文本动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52541666/