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

.hover {
  --c: #1095c1; /* the color */
  --s: .15em;
  
  line-height:1.1em;
  padding-bottom: calc(2.1*var(--s));
  background:
    conic-gradient(from 135deg at top,var(--c) 90deg,#0000 0) 
      left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x,
    conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0) 
      left var(--s) bottom 0/calc(2*var(--s)) var(--s) repeat-x,
    
    linear-gradient(green 0 0) content-box,
    linear-gradient(red 0 0) 0/var(--_p,0%) padding-box no-repeat;
  transition: .5s;
}
.hover:hover {
  --_p: 100%;
}


body {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
  place-content: center;
  align-items: center;
}
h3 {
  font-family: system-ui, sans-serif;
  font-size: 4rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}