Css 以线对波悬停

我正在尝试创建此悬停：

这就是我所做的。有没有一种方法没有图像？是否可以将线条从街灯线条设置为波浪线条的动画

正文{
对齐项目：居中；
显示器：flex；
高度：100vh；
证明内容：中心；
}
a{
边框底部：1px实心#453886；
颜色：#453886；
垫底：25em；
文字装饰：无；
}
a:悬停{
背景图像：url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
背景位置：底部；
背景重复：重复-x；
背景大小：20%；
边界底部：0；
垫底：3em；
文字装饰：无；
}

---

CSS具有

文本装饰样式

属性。 请点击此处：

正文{
对齐项目：居中；
显示器：flex；
高度：100vh；
证明内容：中心；
}
a{
颜色：#453886；
垫底：25em；
文字装饰：下划线；
}
a:悬停{
文字装饰：下划线波浪形；
}

---

你能检查一下照片吗，因为它不会打开。我认为JS和SVG文件有一个选项，但你需要检查如何打开。如果你在谷歌上搜索一些类似于用js和svg制作动画的东西，应该会给出答案。伪半径和边界半径可以部分模拟这一点：