[Resolved] Hyperlink Styling

[jim]

Hi there,

I am trying to figure out how to apply styling to hyperlinks other than the custom colored offered from customizer (Customiser > Colors >Body) or Elementor Theme Style> Typography.

What

i.I need to add (CSS?) is the link to be underlined with red color when normal and with hover to keep just the red color(without underline).
ii. underline with green color when normal and marked with green color when hover

Is it possible to apply those CSS settings globally except for menus (header – footer and sidebar)?

Thanks in advance

[Leo]

Hi there,

The method is different depending on if Elementor is used or not.

Any chance you can disable the maintenance mode and guide me to the link in question?

[jim]

Hi Leo,

Please check here https://oddspower.com/. There are several links to the homepage.

How can I apply the stylish format?

[Leo]

I’m seeing this CSS that is styling the links:
https://www.screencast.com/t/gXfxuKBHq3

Can you remove that first?

Let me know 🙂

[jim]

yes sure. Can you please check now.

thanks

[Leo]

So the CSS selector you are looking for should be:
.site-content a and .site-content a:hover

[jim]

thanks but based on this selector I tried to add also the underline style.

check here https://www.screencast.com/t/UKVcTaZfu wh

It’s being applied ROS (widget, elements, etc). any idea to limit only to the content text area?

[David]

Try .site-content p a – it should only affect those links within a paragraph.

[jim]

thanks for your help David.

[David]

You’re welcome

[Author]

Posts