CSS Hyperlink Animation fails when words wrap at the margin - css

Question

Here's an example of a CSS hyperlink animation from this article:
a {
position: relative;
color: #000;
text-decoration: none;
}
a:hover {
color: #F00;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #F00;
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);
}
<p>As armas e os barões assinalados, que da ocidental praia lusitana, por mares nunca dantes navegados, passaram ainda além da trapobana.</p>
The effect is of the underline progressively appearing (through scaling) form the center to the outline. This is a nice effect accomplished by the :before trick.
However, it completely breaks up when hyperlinks wrap at the margin, and I can't think of any way to fix it...

Answer 1

The problem is that the pseudo-element won't be applied over multiple lines. One workround could be to prevent those line-breaks of the link content.
To achieve this simply add display: inline-block to the a tag
a {
position: relative;
color: #000;
text-decoration: none;
display: inline-block;
}
a:hover {
color: #F00;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #F00;
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);
}
<p>As armas e os barões assinalados, que da ocidental praia lusitana, por mares nunca dantes navegados, passaram ainda além da trapobana As armas e os barões assinalados, que da.</p>

Answer 2

As the psuedo elements wont take multiple lines. you can use white-space: nowrap; to prevent it from wrapping to the next line and animation will look consistent. Even though nothing works as good as like an underline
a {
position: relative;
color: #000;
text-decoration: none;
white-space: nowrap;
}
a:hover {
color: #F00;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #F00;
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);
}
<p>As armas e os barões assinalados, que da ocidental praia lusitana, por mares nunca dantes navegados, passaram ainda além da trapobana.</p>