JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slider">
  <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<ul class="otherblock">
  <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 3px;
  height: 120px;
  width: 15vw;
  background: gray;
  position: relative;
}

.slider li:hover::after {
  content: '';
  position: absolute;
  bottom: -45px;
  left: 2.5vw;
  width: 10vw;
  height: 60px;
  background: orange;
  z-index: 2;
}