Six pure-CSS link hover treatments — slide, expand, swap, marker, squiggle, arrow. Drop into any nav.
Small but high-impact hover interactions for navigation links and inline anchors. None of them require JavaScript, only careful CSS — pseudo-elements, background-image gradient tricks, transform transitions. Pick a single style per site and use it consistently across nav links, blog post links, footer links. The right hover gives a site personality without any other visual change.
Hover any link below. Each card uses a different technique.
Build a showcase of 6 pure-CSS animated link hover styles. Each in its own card with a label and a one-line technique caption:
(1) Slide from left: link::after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:accent } and on :hover width:100% with transition:width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1).
(2) Reveal from center: ::after starts at left:50% width:0; on :hover left:0 width:100%.
(3) Stacked swap: link span { display:block; transition:transform 0.32s ease } with overflow:hidden on the link itself. On :hover translateY(-100%). Use ::after on the span with content:attr(data-after) and a different color so it slides into view.
(4) Marker highlight: set background-image:linear-gradient(120deg, yellow, yellow), background-repeat:no-repeat, background-position:0 100%, background-size:0% 0.4em. On hover, transition background-size to 100% 0.4em (sweeps across like a highlighter).
(5) Squiggle underline: inline SVG path of a wavy line as background-image on the link, with transform:scaleX(0) and transform-origin:left default; on hover transform:scaleX(1).
(6) Arrow nudge: ::after content:" →" with transition:transform. On hover translateX(6px) and shift the link's color to accent. All transitions ease/ease-out-back. No JavaScript required.