<a href="#">Sick Hover</a>
a {
color: #000;
position: relative;
text-decoration: none;
}
a::before {
background: hsl(45 100% 70%);
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease-in-out;
z-index: -1;
}
a:hover::before {
transform: scaleX(1);
}
/* Presentational styles */
body {
display: grid;
font-family: system-ui, sans;
font-size: 3.5rem;
font-weight: 800;
height: 100vh;
place-items: center;
}
// Adam is awesome. 'Nuff said.
// https://codepen.io/argyleink/pen/poEjvpd
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.