Support » Fixing WordPress » Animating links

  • Zseni

    (@oldfunnemo)


    Hello,

    I would like to make an animated link.

    The code is there:

    /
    
    /* Standard links */
    a {
        color: #ffffff;
    }
    
    /* Visited links */
    a:visited {
        color: #ffffff;
    }
    
    /* Hover links */
    a:hover {
        font-weight: solid;
    }
    
    p {
      font-size: 2em;
      max-width: 80%;
    }
    
    a {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
    }
    
    a {
      text-decoration: none;
      position: relative;
    }
    
    a:after {
      border-radius: 1em;
      border-top: .1em solid #2F56B0;
      content: "";
      position: absolute;
        right: 100%;
        bottom: .14em;
        left: 0;
      transition: right .4s cubic-bezier(0,.5,0,1);
    }
    
    a:hover:after {
      right: 0;
    }
    
    

    If I add this to: Appearance → Customize → Additional CSS
    It works but on the whole site.

    I just want it to work in this section:

    <div class="textwidget"><p><a href="http://mydomain.hu/Terms-of-Service" target="_blank" rel="noopener noreferrer">Felhasználási feltételek</a><br>
    <a href="http://mydomain.hu/aws/doc/gdpr" target="_blank" rel="noopener noreferrer">Adatvédelmi tájékoztató</a></p>
    </div>

    How to solve it?

    I am sorry to understand what I want to say.
    Unfortunately I can’t speak English very well :/

    Have a nice day! 🙂

    Thanks,
    Paul

    • This topic was modified 2 months, 1 week ago by  Steve Stern.
Viewing 1 replies (of 1 total)
  • There’s no such thing as font-weight: solid.

    Change a:after to .textwidget a:after.
    Change a:hover:after to .textwidget a:hover:after.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.