html - Underline not working for double line headings

Question

I have a football blog, and sometimes my titles are quite big, so I have to insert a line break to make it fit in the space I want. However, when that happens, the underline animation when you hover over the heading does not work for both lines anymore.

#latestarticles li{
  list-style-type: none;
}


.testarticleimg{
  position:relative;
  right:-23%;
  width:45%;
  max-width:45%;
  overflow: hidden;
  border-radius:5px;
  transition:all 0.5s ease-in-out 0s;
}


.Articletitle > a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #98c5e9;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.5s ease-in-out 0s;
}

.Articletitle > a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.testarticleimg:hover{
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

.articleinfo{
  font-family: 'Roboto Slab',serif;
  font-size:15px;
  opacity:0.4;
  position:relative;
  right:-23%;
  top:2%;
  width:47.5%;
}

.articleinfo p{
  width:47.5%;
}

.articleinfo a{
  color:black;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.articleinfo a:hover{
  color:#98c5e9;
}

.articleshr{
  width:63%;
  opacity:0.1;
  position:relative;
  left:-5%;
  bottom:5%;
}

.Articletitle{
  position:relative;
  right:-23%;
  top:-2%;
  text-align: center;
  font-size: 2vw;
  text-decoration: none;
  color:black;
  font-family: 'Roboto Slab',serif;
}

.Articletitle a{
  text-decoration: none;
  color:#98c5e9;
}

<li><article>
          <span class="Articletitle"><a href="article02052021.html">Klopp makes controversial comments about <br>Man City and COVID</a></span>
          <span class="articleinfo"><br><br><br><i class="far fa-calendar-alt"></i> February 5th 2021
  <i class="fas fa-user-edit"></i> By Shuyan Duan <br><br><p>In a recent press conference by Liverpool manager Jurgen Klopp, the former Borrussia Dortmund coach made comments on the upcoming clash against Manchester City, one which many believe will define the title race for the rest of the season. He also opined on the reason why City have an advantage right now, which will sureley cause much controversy.<br><br><a href="article02052021.html">Read More ></a></p></span>
          <br>
          <br><br><div class="imgBox"><img src="https://www.thisisanfield.com/wp-content/uploads/P2021-02-03-Liverpool_Brighton-23.jpg" class="testarticleimg"/></div>
          <br><br><br><br>
  <hr class="articleshr" id="testarticlehr">
  
  
        </article></li>

question from:https://stackoverflow.com/questions/66065257/underline-not-working-for-double-line-headings

Answer 1

Waitting for answers