Animating links

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 6 years, 11 months ago by Steven Stern (sterndata).