Hyperlink underline gap is too big

Site URL: https://localdesigncircle.com/articles/posterjam-offbeat-typethursday-january

Hello,

I just recently published my website and connected it to a third-party managed domain. 
The problem I have is that the gap between the hyperlink text and the underline is too big, all of a sudden.

Before connecting my domain it was all good, but now it's a big gap, that gets over the text beneath.

I tried unlinking and linking it again with no success. Even for new added links the story is the same.
I also tried to see if it's a problem with the text line spacing, but it's not. Changing it does not affect the gap.

The problem even persists on mobile.

Attached, you can find a screenshot with the problem.

Thanks!

Can you share link to this page? Difficult to help without checking page code.

The link underline on my site is also exhibiting this large gap between the text and underline. My site is https://www.theattnco.com/home

10 hours ago, ralaningalls said:

The link underline on my site is also exhibiting this large gap between the text and underline. My site is https://www.theattnco.com/home

Add to Page Settings > Advanced > Header

<style>
main#page a {
    background-image: none;
    position: relative;
    width: auto;
    display: inline-block;
}
  main#page a:after {
    content: "";
    background: black;
    display: block;
    position: absolute;
    bottom: 20%;
    z-index: 999;
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
}
</style>
  

adjust gap with bottom: 20%;

I am having this same issue as well.  It is almost like something is wrong in the Squarespace global style sheet.  The gaps look ridiculous.  We shouldn't have to use custom CSS to have the URL underline actually under the text. It looks more like a table line than an actual text underline.  Any idea how to reduce the gap without actually turning it into a table?  I know others have had this issue.

On 7/8/2020 at 7:45 PM, betsymintontech said:

I am having this same issue as well.  It is almost like something is wrong in the Squarespace global style sheet.  The gaps look ridiculous.  We shouldn't have to use custom CSS to have the URL underline actually under the text. It looks more like a table line than an actual text underline.  Any idea how to reduce the gap without actually turning it into a table?  I know others have had this issue.

  

Can you share link to your site? We can check easier.

Wow, amazed that everyone has had this issue too! And annoyed with Squarespace; why does this issue exist?

Would love help moving my lines closer to the text as well. The issue seems only to exist with headers; paragraph links are fine.

You can see the issue throughout this page: https://vibraphone-dove-dpfn.squarespace.com/our-approach (password He@1ing).

Thank you!!

Kacia

8 hours ago, Kacia said:

Wow, amazed that everyone has had this issue too! And annoyed with Squarespace; why does this issue exist?

Would love help moving my lines closer to the text as well. The issue seems only to exist with headers; paragraph links are fine.

You can see the issue throughout this page: https://vibraphone-dove-dpfn.squarespace.com/our-approach (password He@1ing).

Thank you!!

Kacia

Hi. Can you take a screenshot? We can check easier

@tuanphan screenshots below!

In case this helps anyone, I used what @tuanphan wrote above and arrived at a solution:

h2 a {
    position: relative;
    width: auto;
    display: inline-block;
    height: 1.15em;
}

h3 a {
    position: relative;
    width: auto;
    display: inline-block;
    height: 1.15em;
}

I'm not sure if this is the best way to do it, but it worked so I'll go with it for now.