[Support request] Styling external links

[David]

Hi Tom and team,

I am trying to style my external links similar to how Wikipedia does… I added the following to my style.css

a[href^=”http://”%5D:not(%5Bhref*=”holfamily.com”%5D):after,
a[href^=”https://”%5D:not(%5Bhref*=”holfamily.com”%5D):after {
content: “(EXTERNAL LINK)”;
padding-left:5px;
}

But nothing changes on the site. I’m just curious if there is anything in the theme or customizer that would prevent the change from showing? Just curious if I have a setting or something that’s preventing it from showing.

Thanks for any help!

GeneratePress 2.1.4

[Tom]

That code is adding the padding to the :after element. If nothing is there, it won’t work.

What happens if you remove :after from the code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Tom,

Thanks for replying.

I tried removing :after but it still doesn’t show the text (EXTERNAL LINK) after external links on the site. Strange eh?

[David]

No worries though… it isn’t a necessity nor a priority. Just wanted to make sure there wasn’t anything in GP conflicting. Thanks Tom 🙂

[Tom]

That looks like it should work now. Can you link me to a page with a link it should be applying to?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts