Squarespace: Remove Underline

In this post, I will share some CSS to Add & Remove Underline from Links in Squarespace 7.1.

CSS – Remove Underline from Links

Add this code to Home > Design > Custom CSS

/* Squarespace 7.1 - Remove Underline */
a {
    background-image: none !important;
}

If you use Squarespace 7.0, try this code

/* Squarespace 7.0 Remove Underline */
a:not(.btn) {
    background-image: none !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

Remove Navigation Links Underline

If you just want to remove underline on Navigation Links, add this to Home > Design > Custom CSS

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}

Remove Footer Links Underline

If you just want to remove underline on Footer Links, add this to Home > Design > Custom CSS

/* SS 7.1 - Footer underline */
footer#footer-sections a {
    background-image: none !important;
}

Remove Body Links Underline

Add this to Home > Design > Custom CSS

#page .sqs-block-html a {
    background-image: none !important;
}

CSS – Change Underline Color

/* Footer underline */
footer#footer-sections a {
    background-image: linear-gradient(to right, red 100%, green);
}
/* Body underline */
#page a {
    background-image: linear-gradient(to right, red 100%, green);
}
/* Header underline */
header#header a:not(.btn) {
    background-image: linear-gradient(to right, red 100%, green);
}