JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<h2>
This text has too many characters for 1 line
</h2>
</div>

<div class="wrapper2">
<h2>
This text has too many characters for 1 line
</h2>
</div>

SCSS

.wrapper {
  width: 260px;
  
  h2 {
    position: relative;
    display: inline;
    
    background-color: yellow;
    
    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 80px;
      height: 3px;
      
      background-color: #0077bc;
      content: '';
    }
    
    &:hover:after {
      width: 100%;
    }
  }
}

.wrapper2 {
  width: 260px;
  
  h2 {
    position: relative;
    display: inline-block;
    
    background-color: yellow;
    
    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 80px;
      height: 3px;
      
      background-color: #0077bc;
      content: '';
    }
    
    &:hover:after {
      width: 100%;
    }
  }
}