JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>

</ul>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}


ul {
  display: flex;
  width: 300px;
  list-style-type: none;
}
li {
  display: flex;
  align-items: center;
  margin: 5px;
  transition: flex-grow 1s;
}
li:hover{
  flex-grow: 1;
}
li::after {
  
}
li:not(:last-child):hover::after {
  content: "";
  flex-grow: 1;
  display: block;
  width: 100%;
  height: 2px;
  margin-left: 5px;
  background: #000;
}