Underline links?!

[markn26]

#631174

Stupid question…how on earth can I get my Avada-powered site to underline all hyperlinks? I could have sworn this used to be in some kind of Style menu in the old days, which no longer appears to be there.

I used this code, and it does nothing:

/* underline all links on all pages and posts*/
#main a:link, a:visited{
 text-decoration: underline;
}

Thanks!

[marklchaves]

#631233

Hi,

Good question.

I think you are pretty close. But, try this. Hopefully, this should work better (notice: no hashtag).

main a {
  text-decoration: underline !important;  
}

This will target all hyperlinks (a tags) in the main body of the page (i.e., links that occur in between <main></main>).

I don’t think you need the pseudo classes :link :visited. Try first without. Add them in if I’m wrong.

P.S. This won’t affect your links in the header and footer. You probably don’t want that anyway. I have a live demo on CodePen if you want to play around with link styling. https://codepen.io/marklchaves/pen/bXbGye

[markn26]

#631454

Thank you! Strangely enough, it doesn’t appear to be affecting hyperlinks in objects such as Avada’s “content boxes”…does anything special have to be added in for those?

EDIT: It looks like underlined links within Content Boxes work in Firefox, but not in Chrome

[marklchaves]

#631513

Hi,

You’re welcome. Ah, the can of worms has been opened. Welcome to the exciting world of web dev.

Try this.

div.fusion-text a {
  text-decoration: underline !important;
}

You might need to tweak, experiment, read-up on CSS, take a CSS class, or hire a pro if you need to do more.

Best of luck!

[westlancs]

#787382

Thank you mark!
We went with Avada for the WCAG claim, however I read that hyperlinks need to ideally underline (on hover or focus at least) for accessibility.

We tweaked your code to:

div.fusion-text a:hover, a:focus {
text-decoration: underline !important;
} /* To underline hyperlinks on hover/*

Which I hope is right given we’re not any type of ‘pro’!
Really appreciate your help.

[ktwitchell001]

#881196

Where do I put this code?

[BubwithTennis]

#881514

It needs to be put in the custom CSS section. Go to the “Avada” option in the left hand side WordPress menu, and select “Options”. In the option navigation, go down to “Custom CSS”.

Paste in the CSS and then “Save changes”.

If you want to underline all text links in the pages and posts, then use the code below (the bit between the “/*” and “*/” is optional – it is just a way of marking what the code that follows it does):

/* underline all links on all pages and posts*/
#main a:link, a:visited{
text-decoration: underline;
}

[tomjay-2021]

#887772

What is the code if I want only decorate the links in boydy text?

Thanks!

[Author]

Posts