CSS
.cle-curblink {
position: relative;
display: inline-block;
padding-bottom: 6px;
color: #00e5ff;
font:
600 16px/1.2 ui-monospace,
"SF Mono",
monospace;
text-decoration: none;
letter-spacing: 0.02em;
transition:
color 0.2s,
text-shadow 0.25s;
}
.cle-curblink::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #00e5ff;
transform-origin: left;
animation: cle-curblink-pulse 1s steps(1, end) infinite;
}
.cle-curblink:hover,
.cle-curblink:focus-visible {
color: #fff;
text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.cle-curblink:hover::after,
.cle-curblink:focus-visible::after {
background: #fff;
box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}
@keyframes cle-curblink-pulse {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cle-curblink::after {
animation: none;
opacity: 1;
}
}