Strikethrough Nav Hover Effect
Point at one item and every other one gets crossed out with a quick slanted pen stroke, one after another. An editorial take on sibling dimming, built on :has() and :not().
Also known as: cross out other links, strike siblings hover, editorial nav hover.
HTML
<nav class="hfx-nav-strike-others"> <a href="#">Index</a> <a href="#">Projects</a> <a href="#">Notes</a> <a href="#">Contact</a> </nav>
CSS
.hfx-nav-strike-others {
--c: var(--hfx-color, #3b82f6);
display: flex;
align-items: center;
font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-strike-others a {
position: relative;
padding: 0.6em 0.9em;
color: inherit;
text-decoration: none;
transition: color 0.25s ease, opacity 0.3s ease;
}
.hfx-nav-strike-others a::after {
content: "";
position: absolute;
left: 0.7em;
right: 0.7em;
top: 50%;
height: 0.12em;
border-radius: 1em;
background: var(--c);
transform: rotate(-5deg) scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-strike-others a:nth-child(2)::after { transition-delay: 0.04s; }
.hfx-nav-strike-others a:nth-child(3)::after { transition-delay: 0.08s; }
.hfx-nav-strike-others a:nth-child(4)::after { transition-delay: 0.12s; }
.hfx-nav-strike-others a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-strike-others:has(a:is(:hover, :focus-visible)) a:not(:hover, :focus-visible) { opacity: 0.45; }
.hfx-nav-strike-others:has(a:is(:hover, :focus-visible)) a:not(:hover, :focus-visible)::after { transform: rotate(-5deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.hfx-nav-strike-others, .hfx-nav-strike-others *, .hfx-nav-strike-others::before, .hfx-nav-strike-others::after, .hfx-nav-strike-others *::before, .hfx-nav-strike-others *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.