Archived topic
Animate underline without svg
3 replies · Started by Aisha on September 18, 2022
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);
}
}
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:
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?
Yes, upload the SVG to your WP media library.
To do that - you would need to install the SVG Support of Safe SVG plugins
