CSS animated underline on hover for text links only

[André]

I want to add an animated underline for text links only. I used this CSS:

.entry-content a
{
text-decoration:none;
display: inline-block;
color:black;
}

.entry-content a:after
{
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}

.entry-content a:hover:after
{
width: 100%;
background: #d11b1b;
}

However, this also adds the effect to images, buttons, and headlines as well. I also tried to put it in its own class, but I cannot add the class to all text links, e.g. taxonomies/categories. If I try to remove it from buttons with :not(.buttons), it doesn’t work anymore on any link.

Also .entry-content doesn’t seem to fit, because it does not work on archive pages either. If I use it for all anchors, it breaks all links because it will affect every link on the site.

How can I target all text links, so, links in blocks, categories, footer menu, taxonomies?
I want all other links in the main menu, buttons, headlines to stay as they are.

[Leo]

Hi there,

There isn’t an easy solution for this unfortunately.

I also tried to put it in its own class, but I cannot add the class to all text links, e.g. taxonomies/categories.

I think adding class to the links you want the effect is the best solution. Then you will need to write more CSS to target the taxonomies and categories separately.

I don’t think it’s possible to use one CSS selector to take care of all the conditionals you need.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Unfortunately, adding a separate class to all the links is impossible because some links are generated by plugins like WP Show Posts Pro for example. However, I found a solution that works for me. It is a mixture of class and selectors. I use RankMath on my site and that automatically creates a class to links .rank-math-link. On the other hand, I can easily select the links from WP Show Posts Pro with div.wp-show-posts-inner > div.wpsp-content-wrap > header > div a.

That keeps the additional CSS to a minimum.

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts