<h3 class="hover-3">Hover Me</h3>
.hover-3 {
--c: no-repeat linear-gradient(#1095c1 0 0);
background:
var(--c) calc(-101% + var(--p,0%)) 100% / 50.1% var(--p,.08em),
var(--c) calc( 201% - var(--p,0%)) 0 / 50.1% var(--p,.08em);
transition: .3s var(--t,0s), background-position .3s calc(.3s - var(--t,0s));
}
.hover-3:hover {
--p: 101%;
--t: 0.3s;
}
body {
height: 100vh;
margin: 0;
display: grid;
gap: 20px;
place-content: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .07em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.