Code block creating double underline in page links and footer

Site URL: https://www.lynnemeade.com

Hi,

I've turned on "Underline Body Links" option in site styles to go with the website's minimalist design aesthetic. A double underline of these links has arisen when adding code blocks to display a colored background, text and links. In order for the links in these code blocks to have an underline, I've used the code:  p a {text-decoration: underline!important}. Without that code, the links aren't displaying according the link site styles setting.

To view the double underline display issue on a page that has a code block with a link underlined:

https://www.lynnemeade.com/contact

To view the single underline display on a page that has a code block without any links:

https://www.lynnemeade.com/teaching-workshops
 

I've tried various ways to resolve the link problem and am stumped at this point. I would be most appreciative for a way to resolve the double underline display issue.

Thank you in advance,

Karen

Add to Page Settings > Advanced > Header

(or use Code Block)

<style>
  a {
    border-bottom: none !important;
}
</style>

7 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

(or use Code Block)

<style>
  a {
    border-bottom: none !important;
}
</style>

Thank you for the code @tuanphan. I wished it had resolved the link display issue.

When I inserted the code above in the Page Settings > Advance > Header, the code removed the light grey underline in all links of the Contact page. I've since removed that code and the code to style links in the code block, that is "p a {text-decoration: underline!important;}", so that the black double underline in all links on the page disappears and the site styled gray link underlines remain.

Let's try another approach:

My goals for pages with code blocks with links and light gray backgrounds are to:
1) not affect the light gray paragraph and footer links that are styled by the "Underline Body Links" option in site styles
2) style links in code blocks with gray backgrounds with a black underline

How can these two goals be achieved with custom CSS?

I would so much appreciate any guidance. Thank you in advance!

12 hours ago, kherzog said:

Thank you for the code @tuanphan. I wished it had resolved the link display issue.

When I inserted the code above in the Page Settings > Advance > Header, the code removed the light grey underline in all links of the Contact page. I've since removed that code and the code to style links in the code block, that is "p a {text-decoration: underline!important;}", so that the black double underline in all links on the page disappears and the site styled gray link underlines remain.

Let's try another approach:

My goals for pages with code blocks with links and light gray backgrounds are to:
1) not affect the light gray paragraph and footer links that are styled by the "Underline Body Links" option in site styles
2) style links in code blocks with gray backgrounds with a black underline

How can these two goals be achieved with custom CSS?

I would so much appreciate any guidance. Thank you in advance!

Try this

<style>
  .code-block a {
    border-bottom: none !important;
}
</style>

15 hours ago, tuanphan said:

Try this

<style>
  .code-block a {
    border-bottom: none !important;
}
</style>

 

@tuanphan Thank you for updated code. I modified it to display an underline in links in the code block (see below). Adding the modified code to Page Settings > Advanced > Header worked. Hurrah!!

<style>
  .code-block a {
   text-decoration: underline!important;}
}
</style>

I so much appreciate your assistance!

Hello
I think I've got nearly the same problem. After I inserted some code this week, the heading links are double underlined. I didn't find out how to get back to just one line. 
Does someone know how to solve this?
Link to the page: https://centrum-niederwangen.squarespace.com
Thanks a lot in advance!

<style>
  .code-block a {
    border-bottom: none !important;
}
</style>

unfortunately did not work

6 hours ago, Jana-Aregger said:

Hello
I think I've got nearly the same problem. After I inserted some code this week, the heading links are double underlined. I didn't find out how to get back to just one line. 
Does someone know how to solve this?
Link to the page: https://centrum-niederwangen.squarespace.com
Thanks a lot in advance!

Hi! I had gotten rid of underlined links for my website with this code:

a {background-image:none !important;}

But, I just noticed that heading links were suddenly single underlined again on my site. I thought it was quite random so started looking for how to get rid of it. When i removed the above code, mine were double underlined too. 

I managed to get rid of the extra random underline by using the code shared by user kherzog like this:

a {text-decoration: none!important;}

Hope this helps you too!