Stylish Highlighter Link Hover Animation

This Highlighter Link Hover Effect provides a sophisticated micro-interaction for inline text links, moving beyond the standard static underline. By default, the link is covered by a soft, semi-transparent background fill; upon hovering, this “highlighter” block collapses into a thin underline while a directional arrow slides in from the right.

Core Technique

The effect is achieved entirely through CSS pseudo-elements and the manipulation of the transform property.

1. The Shrinking Highlighter

The :before pseudo-element is positioned absolutely to fill the entire area of the link. The key to the collapse effect is the transform-origin: 0 24px; setting. By pinning the origin to the bottom of the text, we can use scaleY(.18) on hover to make the background shrink vertically towards the baseline, effectively turning it into an underline.

a:before {
  transition: 100ms ease-out 50ms;
  transform-origin: 0 24px; // Anchors the scale to the bottom
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: mix(#f1f1f1, #0077ff, 80%);
  z-index: -1;
}

a:hover:before {
  transform: scaleY(.18); // Shrinks the block to an underline
}

2. The Sliding Arrow

The :after pseudo-element creates a CSS triangle using borders. It starts with transform: scaleX(0); and transform-origin: left center;. On hover, the transition timing is slightly delayed compared to the underline (100ms), creating a sequential “staggered” animation where the arrow appears to pop out once the underline is formed.

3. Color Mixing (SCSS)

The snippet uses the SCSS mix() function to create a cohesive color palette.

Browser Support

This interaction relies on mature CSS properties that are widely supported in all modern browsers.