Animatie voor onderstreping

.onderstreping
  {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: lightblue;
  }

.onderstreping div
  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

.onderstreping div::after
  {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #000;
    transition: transform 0.2s ease-in-out;
    transform: scale(0);
  }

.onderstreping div:hover::after {transform: scale(1);}

echo "<div class='onderstreping'>";
echo "<div>Animatie voor onderstreping</div>";
echo "</div>";