CSS animation for all clientRects - css

Question

I was playing around with CSS animations to get some eye candy - and I found following result pretty nice:
body {
font-size: xx-large;
font-family: 'Courier New';
color: white;
background: black;
}
a {
text-decoration: none;
position: relative;
}
a:visited {
color: white;
}
a::before,
a::after {
content: '';
position: absolute;
bottom: 0;
right: 50%;
width: 0;
border-bottom: 2px solid blue;
transition: 400ms 200ms;
}
a::after {
left: 50%;
right: 0;
}
a:hover::before,
a:hover::after {
width: 50%;
}
This is a test. This line has to be a bit longer to see the effect.
The problem with it, is its behaviour on line breaks... Can this be fixed? I would already be happy, if the animation is only on the hovered clientRect and once it is finished, all other clientRects get just underlined. A CSS-only solution (if there is one) would be highly appreciated.

Answer 1

I could find a solution by modifying Nicky Meuleman's example (thanks to webdev-dan for providing that link):
body {
background-color: black;
font-size: 3rem;
}
a {
color: blue;
text-decoration: none;
background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
background-size: 0 2px, 0 2px;
background-position: 50% 100%, 50% 100%;
background-repeat: no-repeat;
transition: background-size 400ms linear, background-position 400ms linear;
transition-delay: 200ms;
}
a:hover {
background-size: 50% 2px, 100% 2px;
background-position: 0 100%, 50% 100%;
}
a:visited {
color: white;
}
Short link test.
This link is a bit longer to see the multiline behaviour.
Hope this is useful to others too. :-)