css - 将鼠标悬停在波浪线上

Question

我正在尝试创建此悬停:

这就是我所做的。有没有没有图像的方法？也可以将直线从直线动画化为波浪线吗？

    body {
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
    }
    
    a {
      border-bottom: 1px solid #453886;
      color: #453886;
      padding-bottom: .25em;
      text-decoration: none;
    }
    
    a:hover {
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
      background-position: bottom;
      background-repeat: repeat-x;
      background-size: 20%;
      border-bottom: 0;
      padding-bottom: .3em;
      text-decoration: none;
    }

      <a href="#">Lorem Ipsum</a>

Answer 1

CSS 具有 text-decoration-style 属性。在这里查看:https://css-tricks.com/forums/topic/wavy-unerline/

body {
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
    }
    
    a {
      color: #453886;
      padding-bottom: .25em;
      text-decoration:underline ;
    }
    
    a:hover {
      text-decoration:underline wavy;
      
    }

<a href="#">Lorem Ipsum</a>