<a href="#">Hover this link</a>
a {
box-shadow: inset 0 0 0 0 #54b3d6;
color: #54b3d6;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #54b3d6;;
}
/* Presentational styles */
a {
color: #54b3d6;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
height: 100vh;
place-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.