Code block creating double underline in page links and footer

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!