Archived topic
CSS animated underline on hover for text links only
3 replies · Started by André on October 5, 2020
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.
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.
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.
Glad to hear :)
