<div class="wavy-1">1. Hover me </div>
<div class="wavy-2">2. Hover me </div>
<div class="wavy-3">3. Hover me </div>
<div class="wavy-4">4. Hover me </div>
<div class="wavy-5">5. Hover me </div>
<div class="wavy-6">6. Hover me </div>
<div class="wavy-7">7. Hover me </div>

.wavy-1 {
  padding-bottom:8px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:0 0;
  background-repeat:repeat-x;
}
.wavy-1:hover {
  background-size:20px 10px;
}

.wavy-2 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  transition:99999s;
}
.wavy-2:hover {
  transition:40s linear;
  background-position:1000px 100%, 1010px calc(100% - 8px);
}

.wavy-3 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /100% calc(100% - 13px),
    linear-gradient(#fff 0 0) bottom/var(--d,0) 13px;
  -webkit-mask-repeat:no-repeat;
  transition:0.5s;
}
.wavy-3:hover {
  --d:100%;
 }

.wavy-4 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  -webkit-mask:
    linear-gradient(#fff 0 0) top            /100% calc(100% - 13px),
    linear-gradient(#fff 0 0) var(--p,0) 100%/var(--d,0) 13px;
  -webkit-mask-repeat:no-repeat;
  transition:0.5s,-webkit-mask-position 0s 0.5s;
}
.wavy-4:hover {
  --d:100%;
  --p:100%;
 }
 
.wavy-5 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    150%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(150% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  transition:0.5s;
}
.wavy-5:hover {
  background-position:0 100%, 10px calc(100% - 8px);
}

.wavy-6 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  -webkit-mask:
    linear-gradient(#fff 0 0) top            /100% calc(100% - 13px),
    linear-gradient(#fff 0 0) var(--p,-40px) 100%/40px 13px;
  -webkit-mask-repeat:no-repeat;
  transition:0s;
}
.wavy-6:hover {
  --p:calc(100% + 40px);
  transition:0.8s linear;
 }
 
 .wavy-7 {
  padding-bottom:10px;
  background:
     radial-gradient(50% 100% at 50% -5px            ,#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 0    100%,
     radial-gradient(50% 100% at 50% calc(100% + 5px),#0000 calc(100% - 4px), currentColor calc(100% - 3px) calc(100% - 1px),#0000) 10px calc(100% - 8px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  -webkit-mask:
    linear-gradient(#fff 0 0) top      /100% calc(100% - 13px),
    linear-gradient(#fff 0 0) 0%   100%/var(--d,0px) 13px,
    linear-gradient(#fff 0 0) 100% 100%/var(--d,0px) 13px;
  -webkit-mask-repeat:no-repeat;
  transition:0.5s;
}
.wavy-7:hover {
  --d:50%;
 }

	/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}