[Support request] Animate underline without svg

[Aisha]

Hi

I’m using the following code to animate wavy underline without imgs/svg in Additional CSS block. But instead, buttons and navigation menu is getting animated. Underline turns wavy but doesn’t animate. How to fix it?

.entry-content a {
text-decoration-line: underline;
text-decoration-style: wavy;
}

a:hover
{
text-decoration-style: wavy;
text-decoration-color: #ff1493;
text-decoration-line: underline;
animation: animate 1s linear infinite;
}
@keyframes animate
{
0%
{
transform: translatex(-1px);
}
100%
{
transform: translatex(-57px);
}
}

[David]

Hi there,

you can’t animate a CSS text-decoration property.

To do it without an image, requires a CSS psuedo element, and that relies on the Links text to be added inside a HTML data-attribute see here:

https://codepen.io/daviddarnes/pen/OgaRYw

So that method is not good as you have to include those data-attributes.

Therefore the method with an SVG background image make the most sense – see here:

https://codepen.io/tostrye/pen/WqKgjz

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

[Aisha]

Didn’t see your reply before.

Okay so SVG is the way to go. Out of curiosity, do you recommend uploading SVG to own WordPress site rather than other 3rd party sites?

[David]

Yes, upload the SVG to your WP media library.
To do that – you would need to install the SVG Support of Safe SVG plugins

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

[Author]

Posts