CSS problem with anchor animation on hover

Question

I'm running into a problem that my CSS animation is not working if the anchor link breaks onto multiple lines.

I've created a snippet to showcase my problem.

body {
  background-color: #a3d5d3;
}

.max-width {
  width: 500px;
}

p {
  line-height: 24px;
}

a {
  position: relative;
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #000;
  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);
}

<h1>Hi,</h1>
<div class="max-width">
  <h3>The animation works when the anchor link is just on one line, but it's not working when it splits onto multiple lines. See both links in the paragraph below.</h3>
  <p>
    In <a href="https://twitter.com/jane_r?lang=en" target="_blank" rel="noopener">her own words</a>, she is a “digital marketing executive, bourbon lover, spinner, runner and reluctant hockey mom.” And she “<a href="https://www.linkedin.com/in/janericciardelli/"
      target="_blank" rel="noopener">possesses an entrepreneurial bent</a>, having co-founded Medium One, a leading digital agency, which was acquired by Mosaic Group in 2000”.</p>
</div>

I've tried playing around with the width and position of the line, but can't get it working.

Any suggestions?

(Codepen https://codepen.io/jetweevers/pen/EreQaL)

Answer 1

Here is the updated fiddle:

body {
  background-color: #a3d5d3;
}

.max-width {
  width: 500px;
}

p {
  line-height: 24px;
}

a {
  text-decoration: none;
  background-image: linear-gradient(black, black);
  background-position:bottom center;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s;
}

a:hover,
a:focus {
  background-size: 100% 2px;
}

<h1>Hi,</h1>
<div class="max-width">
  <h3>The animation works when the anchor link is just on one line, but it's not working when it splits onto multiple lines. See both links in the paragraph below.</h3>
  <p>
    In <a href="https://twitter.com/jane_r?lang=en" target="_blank" rel="noopener">her own words</a>, she is a “digital marketing executive, bourbon lover, spinner, runner and reluctant hockey mom.” And she “<a href="https://www.linkedin.com/in/janericciardelli/"
      target="_blank" rel="noopener">possesses an entrepreneurial bent</a>, having co-founded Medium One, a leading digital agency, which was acquired by Mosaic Group in 2000”.</p>
</div>