<h3 class="hover one">Hover Me</h3>
<h3 class="hover two">Hover Me</h3>
<h3 class="hover three">Hover Me</h3>
<h3 class="hover four">Hover Me</h3>
<h3 class="hover five">Hover Me</h3>
.hover {
  --c: #1095c1;
  --s: .15em;
  
  line-height: 1.1em;
  padding-bottom: calc(2.1*var(--s));
  background: 
    radial-gradient(35% 100% at 50% -20%,#0000 50%,var(--c) 53% 96%,#0000) 
     left 0 bottom 0,
    radial-gradient(35% 100% at 50% 120%,#0000 50%,var(--c) 53% 96%,#0000) 
     left calc(3*var(--s)/2) bottom var(--s);
  background-size: calc(3*var(--s)) var(--s);
  background-repeat: repeat-x;
}
.hover:hover {
  color: var(--c);
}

.one {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 0/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.one:hover {
  --_p: 100%;
}
.two {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 100%/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.two:hover {
  --_p: 100%;
}
.three {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) calc(100% - var(--_p,0%))/var(--_p,0%) padding-box no-repeat;
  transition: .5s,-webkit-mask-position 0s .5s;
}
.three:hover {
  --_p: 100%;
}
.four {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 50% 100%/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.four:hover {
  --_p: 100%;
}
.five {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 0%   100%/var(--_p,0%) padding-box no-repeat,
    linear-gradient(#000 0 0) 100% 100%/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.five:hover {
  --_p: 50.5%;
}


body {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
  gap: 20px;
  place-items:center;
}
h3 {
  font-family: system-ui, sans-serif;
  font-size: 4rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.