How to override global underline CSS code

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 :)

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

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

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

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!

Try this for your full CSS:

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

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

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.

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

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;
}

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

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.

Great, thanks for confirming!

No problem :)