先看演示

CSS

a {
	font-family:nb,"microsoft yahei"!important;
	color:#369;
	text-decoration:none;
	padding-left:0.3rem;
	padding-right:0.3rem;
}
a:hover {
	color:#eb5055 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E .squiggle %7B animation: shift .3s linear infinite; %7D @keyframes shift %7B from %7B transform: translateX(0); %7D to %7B transform: translateX(-15px); %7D %7D %3C/style%3E%3Cpath fill='none' stroke='%23eb5055' 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-size:auto 4px;
 background-repeat:repeat-x;
 background-position:bottom;
	text-decoration:none;
}

其中的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 4">
 <style type="text/css">
  .squiggle {
   animation: shift .3s linear infinite;
  }
  @keyframes shift {
   from { transform: translateX(0); }
   to { transform: translateX(-15px); }
  }
 </style>
 <path fill="none" stroke="#0087ca" 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" />
</svg>

网站推荐

用于 SVG 的 URL-encoder

Github：用于 SVG 的 URL-encoder