JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li class="active">Dolor</li>
  <li>Consectatur</li>
  <li>Adipiscing</li>
</ul>

SCSS

$speed: 200ms;

ul {
  margin: 12px;
  padding: 0;
}

li {
  display: block;
  list-style: none;
  padding: 12px;
  border-radius: 7px;
  position: relative;
  transition: background-color $speed;

  &.active {
    background-color: #CCC;
  }

  &:hover {
    z-index: 20;
    background-color: #CCC;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    top: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    z-index: 10;
    transition: left $speed, right $speed, background-color $speed;
  }
}

li.active + li:hover, li:hover + li.active {
  &::after {
    left: 0;
    right: 0;
    background-color: #CCC;
    z-index: 10;
  }
}