JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="hover-1">1. Hover me </div>
<div class="hover-2">2. Hover me </div>
<div class="hover-3">3. Hover me </div>
<div class="hover-4">4. Hover me </div>

CSS

/* https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40 */

body {
  text-align: center;
}

div[class] {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  /* font-weight: bold; */
  margin: 25px;
  padding: 8px;
  cursor: pointer;
}

.hover-1 {
  background:
    linear-gradient(45deg, #000 50%, transparent 0) right /250% 100% no-repeat,
    linear-gradient(45deg, transparent 50%, #000 0) left /250% 100% no-repeat;
  transition: 0.5s;
}

.hover-1:hover {
  background-position: center;
  color: #fff;
}

.hover-2 {
  background:
    radial-gradient(farthest-side, transparent calc(100% - 150px), black 0) center /var(--d, 600px) var(--d, 600px) no-repeat;
  transition: 0.5s;
}

.hover-2:hover {
  --d: 300px;
  color: #fff;
}

.hover-3 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 100%) 0,
    linear-gradient(currentColor 0 0) 0 var(--d, 0),
    linear-gradient(currentColor 0 0) var(--d, 0) 100%,
    linear-gradient(currentColor 0 0) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.hover-3:hover {
  --d: 100%;
  --p: 0%;
}

.hover-4 {
  background:
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 0 100%,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 100% 100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.hover-4:hover {
  --d: 20px;
}