CSS Links on my site are automatically underlined no matter how I edit the CSS

[entheoscope]

Hi!

I am working on my website EntheoscopeMag.com. I am trying to resolve an issue on the mobile site where the menu button and header are automatically underlined, which I realized is occurring because all links on the site are automatically underlined. I've tried inserting the following into the site's CSS to no avail:

a {

text-decoration: none;

}

a:link {

text-decoration: none;

}

My site is based on a wordpress theme. The theme includes these lines in the CSS, which I have disabled (again to no avail):

a {  

 border-bottom: 1px solid var(--global--color-secondary);

  color: var(--wp--style--color--link, var(--global--color-primary));  

  text-decoration: none;        

transition: border-color 0.1s ease-out;

}

.has-link-color a {

border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));

}

I would really appreciate if anybody has any insight into why the links are automatically underlined. Thank you!!

 

[Johna]

Have you tried adding !important like this:

a {
  text-decoration: none !important;
}

 

[entheoscope]

Have you tried adding !important like this:

a {
  text-decoration: none !important;
}

Thank you for the suggestion. This did not fix the issue but gave me some further insight into the problem.

After looking into your suggestion I realized that the line appearing under links is not actually an underline. I used this code:

a {
    text-decoration: underline;
}

This code added another underline on top of the existing one. I believe the text is "underlined" not because of text-decoration but because of the border-bottom property being used on links. I haven't been able to fix it yet but I at least have a starting point to mess with now. Thank you again!

 

[Malcolm]

Thank you for the suggestion. This did not fix the issue but gave me some further insight into the problem.

After looking into your suggestion I realized that the line appearing under links is not actually an underline. I used this code:

a {
    text-decoration: underline;
}

This code added another underline on top of the existing one. I believe the text is "underlined" not because of text-decoration but because of the border-bottom property being used on links. I haven't been able to fix it yet but I at least have a starting point to mess with now. Thank you again!

Great find! Do you still need help with removing the border? I checked your site just now and it seems like you may have already resolved this.