JSFiddle - React, Tailwind, and code Playground

by Dark Hole

HTML

<div class="overflowing">Hello!</div>

CSS

.overflowing {
  background: black;
  color: white;
  position: relative;
  padding: 10px;
  height: 50px;
  display: inline-block;
}
.overflowing::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: orange;
  transition: .5s;
}
.overflowing:hover::after {
  height: 100%;
}