How to add italic hover to your navigation & text links (hyperlinks) with CSS (Squarespace 7.0 & 7.1)

Adding a hover state to hyperlinks throughout your site is a great way to create movement and incorporate an interactive element. We love dressing up our hyperlinks with an italic hover state for a modern and editorial look and feel.

To add italic hover links on your Squarespace website, navigate to Design > Custom CSS, and copy/paste the following CSS:

Italic hover for headings:

// H1 ITALIC HOVER
h1 a:hover {font-style: italic;}


// H2 ITALIC HOVER
h2 a:hover {font-style: italic;}

header nav a:hover{font-style: italic;}

// H3 ITALIC HOVER
h3 a:hover {font-style: italic;}

// H4 ITALIC HOVER
h4 a:hover {font-style: italic;}

Italic hover for paragraphs:

// PARAGRAPH ITALIC HOVER
p a:hover{font-style: italic;}

Italic hover for navigation links:

// ITALIC HOVER FOR NAV LINKS
header nav a:hover{font-style: italic;}

PIN THIS TUTORIAL FOR LATER!

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.

More tutorials