wavy underline

[ccastells]

Hello, I am trying to add this style of underlining into the site but doesn't seem to be working. Could someone help me please? Thanks! :)

https://codepen.io/daviddarnes/pen/OgaRYw?q=animate underline&order=popularity&depth=everything&show_forks=false

http://andrei-lascu.com

[mariusjopen]

Hi @ccastells
I looked at the code and it seems simple.

Can you show what you already did?

Many wishes!!

Marius

[ccastells]

Hi @mariusjopen ,
I copied the css into the custom css & html page:

a {
text-decoration: none;
position: relative;
padding-bottom: 1em;
overflow: hidden;
color: white;
&:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
white-space: nowrap;
content: attr(data-text)attr(data-text);
color: transparent;
line-height: 1.8;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #ffc823;
}
&:hover:after {
animation: wavy-slide 3s linear infinite;
}
}

@keyframes wavy-slide {
to {
margin-left: -51%;
}
}

But it doesn't seem to work... :s
I also tried changing the &:after/&:hover to a:after/a:hover, but again didn't work.

I've set the underline stroke to 1px in the customise section so you can see where the links are.
http://andrei-lascu.com/info/

Any idea of how I can fix it?

Many thanks!!! :)
Carlota