[Resolved] CSS animated underline on hover for text links only

Home Forums Support CSS animated underline on hover for text links only

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1472889
    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.

    #1473368
    Leo
    Staff
    Customer Support

    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.

    #1474126
    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.

    #1474833
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.