hover block effect

hover block effect

by Ayyappan Sakthivadivel

HTML

<a href="#">Sick Hover</a>

CSS

a {
  color: #000;
  position: relative;
  text-decoration: none;
}

a::before {
  background: rgb(255, 0, 0);
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: bottom;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

a:hover::before {
  transform: scaleX(1);
  transform-origin: top;
}

/* Presentational styles */
body {
  font-family: system-ui, sans;
  font-size: 3.5rem;
  font-weight: 800;
}