.link {
  font-weight: 500;
  color: var(--color-primary);
  display: inline;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 25%,
    transparent 25%
  );
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  background-size: 0% 0.2em;
  transition: background-size 0.3s;
}

.link:hover {
  background-image: linear-gradient(
    to bottom,
    var(--color-primary) 25%,
    transparent 25%
  );
  background-size: 100% 0.2em;
  background-position-x: left;
  background-position-y: bottom;
}
