Link Underline Grow Animation

What You'll Create

An animated underline effect that grows from zero width to full width when hovering over links in text blocks. Creates a sleek, modern interaction.

The Problem It Solves

Default link styles in Squarespace are static. When you want a more sophisticated hover effect that draws attention to clickable links, you need CSS pseudo-elements to create the growing underline animation.

Perfect For

Navigation links, Footer links, In-text links, Call-to-action text, Blog post content

What Makes This Different

This technique uses the ::after pseudo-element to create a line that starts at 0% width and transitions to 100% on hover. The underline expands from the center, creating an elegant reveal effect. Fully customizable color, height, and animation speed.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Text block with links

• Toolkit Title: Link Underline Animation

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support