How to add italic hover to your links on Squarespace

KEY TOPICS

1. ITALIC HOVER FOR HEADINGS

2. ITALIC HOVER FOR PARAGRAPHS

3. ITALIC HOVER FOR NAVIGATIONS LINKS

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;}