JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

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

CSS

/* https://css-tricks.com/css-hover-effects-background-masks-3d/ */

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

h3 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin: auto;
  cursor: pointer;
  padding: .1em .1em;
}


.hover {
  --b: 0.1em;
  /* the thickness of the line */
  --c: red;
  /* the color */

  color: #0000;
  padding-block: var(--b);
  background: linear-gradient(var(--c) 50%, #000 0) 0% calc(100% - var(--_p, 0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 0% var(--_p, 0%)/var(--_p, 0%) var(--b) no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: .3s var(--_s, 0s) linear, background-size .3s calc(.3s - var(--_s, 0s));
}

.hover:hover {
  --_p: 100%;
  --_s: .3s;
}

.hover2 {
  --s: 0.1em;
  /* the thickness of the line */
  --c: red;
  /* the color */

  color: #0000;
  padding-bottom: var(--s);
  background:
    linear-gradient(90deg, var(--c) 50%, #000 0) calc(100% - var(--_p, 0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p, 0%) var(--s) no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.5s;
}

.hover2:hover {
  --_p: 100%;
}