Make large offset underlines for links on Squarespace

I ❤️ helping people with their Squarespace sites. Sometimes I do that by answering interesting questions on the Squarespace Subreddit or the Squarespace Forum.

Today I’ll be answering this question on reddit.

Here’s the video.

Including Thoughts + How it’s done + How it should be done and how to tweak the code.

Here’s the Custom CSS

/*
🟢🟢🟢large offset underlines for hyperlinks By Code + Tonic
*/

@transparent-color: fade(#FFF, 0%);
@large-underline-color: fade(#000, 10%);

.html-block{
  p a {
    text-decoration:none !important;
    border-bottom-width: 0px !important;
    background: linear-gradient(180deg, @transparent-color 55%, @large-underline-color 65%) !important;
    }
}

/*
🔴🔴🔴 END large offset underlines for hyperlinks By Code + Tonic
*/

Need help with Squarespace styling, code or user experience?

I’m pretty good at all those. So go ahead and hire me to make your site even smoother & more effective.

-Fenix