Это мой код:
<!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) текст будет переходить как единое целое со всеми строками одновременно слева направо
Я ценю вашу помощь!