CSS Hyperlink Animation fails when words wrap at the margin
<p>Here's an example of a CSS hyperlink animation from <a href="http://tobiasahlin.com/blog/css-trick-animating-link-underlines/" rel="nofollow noreferrer">this article</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;As armas e os barões assinalados, que da &lt;a href="#"&gt;ocidental praia&lt;/a&gt; lusitana, por mares &lt;a href="#"&gt;nunca dantes navegados, passaram ainda além da trapobana&lt;/a&gt;.&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<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 <code>:before</code> trick. </p>

<p>However, it completely breaks up when hyperlinks wrap at the margin, and I can't think of any way to fix it... </p>