a {
  color: blue;
  transition: color 350ms;
}
a:hover {
  color: green;
}

a {
  padding-bottom: 0.1em;
  background: linear-gradient(0deg, blue, blue) no-repeat right bottom / 0 2px;
  transition: background-size 350ms;
}
a:hover {
  background-size: 100% 2px;
  background-position-x: left;
}

a {
    padding: 0 0.2em;
    text-decoration-color: var(--accent-color);
    background: linear-gradient(0deg, blue, blue) no-repeat right bottom / 0 100%;
    transition: background-size 350ms, color 350ms;
}

a:hover {
    color: #fff;
    background-size: 100% 100%;
    background-position-x: left;
}

a {
  padding: 0 0.2em;
  text-decoration-color: blue;
  background: transparent;
  transition: background-color 350ms, color 350ms;
}
a:hover {
  color: #fff;
  background: blue;
}

a {
  text-decoration-color: blue;
  background: linear-gradient(0deg, blue, blue) no-repeat right bottom 0.2em / 100% 0;
  transition: background-size 350ms, color 350ms;
}
a:hover {
  color: #fff;
  text-decoration-color: blue;
  background-size: 100% 100%;
}

a {
  text-decoration: none;
  padding-bottom: 0.1em;
  background: linear-gradient(-90deg, #aaa 0%, #aaa 50%, blue 50.1%, blue 100%) no-repeat left 100% bottom 0.2em / 200% 2px;
  transition: background-position 350ms;
}
a:hover {
  background-position-x: 0%;
}

a {
  color: transparent;
  text-decoration-color: blue;
  background: linear-gradient(-90deg, blue 0%, blue 50%, red 50.1%, red 100%) no-repeat left 100% bottom 0% / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 350ms;
}
a:hover {
  background-position-x: 0%;
}