Control animated underline on hyperlinks

[drewberts]

Hi all – new to the forum (and a small amount of CSS knowledge) so be gentle…

I’m using the following CSS on a wordpress site to animate an underline on hyperlinks. It works as it should but applies it to all hyperlinks including images across the site. What I want to be able to do is simply apply it to certain elements by CSS class but the following code applies to everything on the site by default (its housed in the custom CSS area)

Code Snippet

Any simple suggestions to control where this gets applied

[Paulie_D]

Use a class instead…then apply that class selectively.

https://codepen.io/Paulie-D/pen/xYYGRK

[drewberts]

Thanks Paulie_D

Am I right in thinking I have to manually add this class to every link I set up? It works as described but I was hoping to be able to set a CSS style on the main body of text in a page and all links within that element are animated – I was looking to apply a “non animated” style / class to elements rather than an “animated” one – hope that makes sense and apologies if I’m missing something obvious.

[HazJ]

You can use the > selector as well. Example:
https://codepen.io/anon/pen/dddOzM
This would set the colour of all a tags ONLY inside the div with “links” class.

[Paulie_D]

Certainly it can be applied to all links…that’s what your original code did.

What it won’t do is fix the problem with images inside links being underlined…because they are still links even if they contain images instead of text.

The only solution there is to apply a separate class to those links which remove this styling…Catch 22.

Either way, you need to apply a class to something and there is no simple (“add a selector”) solution since there is no selector (yet) for determining how a parent should act based on a child element.

[Author]

Posts