<p>我的<a href="/airen">Codepen</a>里收集了很多有趣的案例，也有很多案例是为<a href="https://www.w3cplus.com" target="_blank">W3cplus</a>提供Demo展示的(^_^)!</p>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4vh;
  padding: 5vw;
  box-sizing: border-box;
}


:root {
  --mainColor: #ff9800;
}

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 3px 3px;
  position: relative;
  padding: 2px 0;
  transition: all .2s ease;
  
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: rgba(0,0,0,.8);
  
  &: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-shadow: 1px 1px 1px rgba(0,0,0,.5);
    color: #EA215A;
  }
  
  &::after {
    content: '';
    display: inline-flex;
    padding: 0 2px;
    transition: background .2s ease, color .2s linear;
  }
}


a[href^="http"]:hover::after{
  content:"(" attr(href) "➜)";
  padding: 0 5px;
  margin-left: 5px;
  background:
     linear-gradient(
       to right,
       var(--mainColor) 0%,
       var(--mainColor) 5px,
       transparent
     );
}