css下划线动画

css下划线动画，支持多个文字换行下划线动画。

<a href="#">boooooooooooop</a>
<br /><br /><br />
<div><a href="#">on multiple lines.</a></div>

body {
  background-color: #222b40;
  font-size: 3rem;
}
div {
  width: 200px;
}

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(#222b40, #222b40),
    linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#feb2b2, #feb2b2);
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear, background-position 2s linear;
}

a:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

原文网址：https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline