CSS
.cle-sweep {
position: relative;
display: inline-block;
color: #f0eeff;
font:
600 16px/1.4 system-ui,
sans-serif;
text-decoration: none;
padding-bottom: 6px;
overflow: hidden;
}
/* Permanent underline that draws in from the left */
.cle-sweep::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: #7c6cff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-sweep:hover::before,
.cle-sweep:focus-visible::before {
transform: scaleX(1);
}
/* Bright gradient highlight that sweeps across once on hover */
.cle-sweep::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60%;
height: 1.5px;
background: linear-gradient(90deg, transparent, #fff 50%, transparent);
transform: translateX(-100%);
opacity: 0;
transition:
transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
opacity 0.2s;
pointer-events: none;
}
.cle-sweep:hover::after,
.cle-sweep:focus-visible::after {
transform: translateX(280%);
opacity: 1;
}