先看演示
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 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