link hover effect

Hi there,

I found this really cool hover effect for links:
https://css-tricks.com/having-fun-with-link-hover-effects/

`:root {
--mainColor: #ff9800;
}

body {
align-items: center;
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 2em;
height: 100vh;
justify-content: center;
}

a {
background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 3px 3px;
color: #000;
text-decoration: none;
}

a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 6px;
background-repeat: repeat-x;
text-decoration: none;
}

but when I try to put is in the custom CSS panel my website 'breaks in two'.
my header goes to the left half of my screen, the content underneath moves to the right upper half. Words split,...Either way, it looks not as good as I'd hoped. Is there a way to use something like this without the breaking :-)?

kind regards
Nele