<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;
align-content: start;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 4rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.