How to add italic hover to your links on Squarespace

Written By Verso Visual

To introduce movement and interactivity, consider adding a hover state to hyperlinks across your website. We prefer applying an italic hover state to achieve a modern and editorial appearance.

To implement italic hover links, go to Design > Custom CSS, and copy/paste the provided CSS code. 


  1. Italic hover for Headings:

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


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


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


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

2. Italic hover for Paragraphs

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

3. Italic hover for Navigation Links

// NAVIGATION LINK HOVER//
header nav a:hover {font-style: italic;}
 

KEY TOPICS

1. ITALIC HOVER FOR HEADINGS

2. ITALIC HOVER FOR PARAGRAPHS

3. ITALIC HOVER FOR NAVIGATIONS LINKS

Verso Visual https://www.versovisual.com
Previous

Add custom font on squarespace 7.1
Next

How to remove underlined active links in Squarespace 7.1