20 CSS Link Hover Effect Designs 03 / 20
Dotted Focus Ring
A dotted box outline appears around the link on hover, paired with a blinking trailing caret.
The code
<a href="#" class="cle-dot"> <span class="cle-dot-bullet" aria-hidden="true">◉</span> Let's Goooo! <span class="cle-dot-caret" aria-hidden="true">_</span> </a>
<a href="#" class="cle-dot">
<span class="cle-dot-bullet" aria-hidden="true">◉</span>
Let's Goooo!
<span class="cle-dot-caret" aria-hidden="true">_</span>
</a>.cle-dot {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
color: #ddff8a;
font:
700 16px/1.2 system-ui,
sans-serif;
text-decoration: underline;
text-decoration-color: #ddff8a;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
border: 1.5px dotted transparent;
border-radius: 3px;
transition: border-color 0.2s;
}
.cle-dot-bullet {
color: #ddff8a;
font-size: 14px;
}
.cle-dot-caret {
opacity: 0;
color: #ddff8a;
font-weight: 700;
transition: opacity 0.2s;
}
.cle-dot:hover,
.cle-dot:focus-visible {
border-color: #ddff8a;
}
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
opacity: 1;
animation: cle-dot-blink 0.9s steps(1) infinite;
}
@keyframes cle-dot-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
animation: none;
opacity: 1;
}
} .cle-dot {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
color: #ddff8a;
font:
700 16px/1.2 system-ui,
sans-serif;
text-decoration: underline;
text-decoration-color: #ddff8a;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
border: 1.5px dotted transparent;
border-radius: 3px;
transition: border-color 0.2s;
}
.cle-dot-bullet {
color: #ddff8a;
font-size: 14px;
}
.cle-dot-caret {
opacity: 0;
color: #ddff8a;
font-weight: 700;
transition: opacity 0.2s;
}
.cle-dot:hover,
.cle-dot:focus-visible {
border-color: #ddff8a;
}
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
opacity: 1;
animation: cle-dot-blink 0.9s steps(1) infinite;
}
@keyframes cle-dot-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
animation: none;
opacity: 1;
}
}