44 CSS Link Styles
Dive into the world of advanced link styling with our collection, emphasizing dynamic text decoration. The demos show how to achieve effects like “color fill” (Link Fill on Hover) or animated font weight change purely with CSS. The technical focus is on utilizing the currentColor property to create semi-transparent, automatically inherited underlines, and applying the calc() function with variables for precise control over line movement. This is a must-have for creating clean, performant code that ensures a responsive and lively UX.
Last updated:
Link Split Hover Effect
A “tearing” text effect created by layering two <span>s with an asymmetrical clip-path. On hover, transform shifts the top part, ::after pseudo-elements draw the tear line, and an underline animates via background-position - the entire choreography is managed by transition-delay and a custom cubic-bezier function.
Hover Effect #1
A “slide-in” background effect, implemented minimally and effectively - via a transition on the box-shadow property with the inset keyword. This approach creates a smooth fill animation without pseudo-elements, keeping the code exceptionally clean.
Hover Effect #2
A performant text-swapping effect on hover, built on a synchronized animation - the original <span> is displaced by a ::after pseudo-element. The replacement content is sourced from a data-replace attribute via attr(), while smoothness and performance are ensured by transform: translate3d and a custom cubic-bezier function.
