[Resolved] Style external links

[Atefan]

Hello,

I found one code, that seems to do the job, I like to archive, to style external links.

a[href*="//"]:not([href*="mywebsite.com"]):after{
    content: " " url("https://developer.mozilla.org/static/general/external-link.fb3c293b9226.svg");   
}

from https://codepen.io/olegip/pen/KLxdME

But, how to exclude now social icons?
when I add the css code 2 times, with another URL, it does not work.
any idea?
instead of the SVG icon, it could have written (EXTERNAL) only too.

somebody now?
Thanks

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Atefan]

sure

[Leo]

This isn’t really a theme-related question.

I think the best solution is to add a custom class to the external links so you can target your CSS to those links only.

[Atefan]

Sure.

But I hope it helps others, who are SEO concern.

a[href*="//"]:not([href*="mywebsite.com"]):not([href*="youtube.com"]):not([href*="linkedin.com"]):not([href*="printerest.com"]):not([href*="facebook.com"]):not([href*="instagram.com"]):after{
    content: " " url("https://developer.mozilla.org/static/general/external-link.fb3c293b9226.svg");   
}

[Leo]

Thanks for sharing!

[Author]

Posts