[Resolved] How to override global underline CSS code

[Tom]

Hi, I had a question in another thread about underline that was answered by Leo.

This is the CSS I inserted into GeneratePress:
.site-content a {
text-decoration: underline;
}

It works fine but there are a few cases where I don’t want a link to be underlined. I am using Elementor page builder and have tried toggling “decoration” to “none”, but it doesn’t seem to get rid of the underline.

Here is the URL of my page: https://www.thedermdetective.com/how-to-get-rid-of-acne-scars/

The underline shows up in the table of contents where I have internal links within the article. How can I remove this underline manually?

Thanks,
Tom

[Leo]

Hi there,

What if we do this so the CSS only applies to pages that aren’t using Elementor?

body:not(.elementor-default) .site-content a {
    text-decoration: underline;
}

Let me know 🙂

[Tom]

Ah I see. However, all of my pages use Elementor…

Did you mean for me to try making a page without Elementor and see if that works?

Thanks,
Tom

[Leo]

Hmm a bit tricky to exclude just that one section for sure.

So you want no underline under the Contents section at all?

[Tom]

That’s right, just for those headings in this table of contents. Everywhere else in this article is fine.

By the way, it seems that I can override the global CSS with Elementor’s button elements by setting “decoration” to “none”. However, doing the same with heading elements doesn’t seem to work.

Do you have any other suggestions to try? Thanks for your help!

[Leo]

Try this for your full CSS:

.site-content a {
    text-decoration: underline;
}
.site-content .elementor-element-841a1d3 a {
    text-decoration: none !important;
}

[Tom]

Awesome, that was like magic! It works now, thanks.

So does the “.elementor-element-841a1d3” part just work on headings? Want to make sure I understand how this bit of CSS works for my own reference in case of future problems.

Thanks,
Tom

[Leo]

That is the ID of that Elementor section.

The second block of CSS basically overwrites the first block of CSS as it’s more specific.

[Tom]

Hi again,

Regarding the same topic on applying a global underline, is it possible to apply a color to the underlined link based on what the linked URL is?

In my case, I would like to color all URLs pointing to “amazon.com/***” a certain color. Currently I am doing this by hand so wanted to check if there was a CSS solution.

Thank you!

Tom

[Leo]

Hmm you’d have to add a class for the link:
<a href="https://AMAZONLINK/" class="amazon-link">LINK TEXT</a>

Then we can color with this CSS:

a.amazon-link {
    text-decoration-color: #000;
}

[Tom]

Thanks Leo – Do I add the class in the custom CSS section? Sorry I’m not familiar with it.

Also is it possible to use a wildcard to denote all URLs with the root domain of (in this example) “amazon.com/*”?

Thanks,
Tom

[Leo]

Oops somehow I left out the link in my HTML above:
https://generatepress.com/forums/topic/how-to-override-global-underline-css-code/#post-964530

Also is it possible to use a wildcard to denote all URLs with the root domain of (in this example) “amazon.com/*”?

Not I’m aware of unfortunately. Will need a custom solution for that.

[Tom]

Great, thanks for confirming!

[Leo]

No problem 🙂

[Author]

Posts