<h3 class="hover-4">Hover Me</h3>

.hover-4 {
  --c: #1095c1;
  line-height: 1.2em;
  background:
    conic-gradient(from -135deg at 100%  50%,var(--c) 90deg,#0000 0) 
      0    var(--p,0%)/var(--s,0%) 200% no-repeat,
    conic-gradient(from -135deg at 1.2em 50%,#0000 90deg,var(--c) 0) 
      100% var(--p,0%)/var(--s,0%) 200% no-repeat;
  transition: .4s ease-in, background-position 0s;
}
.hover-4:hover {
  --p: 100%;
  --s: calc(50% + .61em);
}

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;
}