<a href="#" class="cle-mag">Open dashboard →</a>

.cle-mag {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: #c4b5fd;
  font:
    600 15px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.25s;
}
.cle-mag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #a78bfa;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-mag:hover,
.cle-mag:focus-visible {
  transform: translateX(6px);
  color: #fff;
}
.cle-mag:hover::after,
.cle-mag:focus-visible::after {
  transform: scaleX(1);
}