JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="line">
 <div class="container">
   <div class="col1">lorem</div>
   <div class="col2">ipsum</div>
   <div class="col3">dolor</div>
   <div class="col4">sit</div>
   <div class="col5">amet</div>
   <div class="dot"></div>
  </div>
</div>

CSS

.line{
  height:1px;
  width:80%;
  background:black;
  positinon:absolute;
  margin:50px 100px;
}
.dot{
  transition:.5s all ease;
  height:20px;
  width:20px;
  border-radius:50%;
  position:absolute;
  background:#e90000;
  margin-top:-10px;
  margin-left:-60px;
  z-index:5;
}
.container{
  height:70px;
  width:80%;
  margin-left:12%;
}
[class*="col"]{
  transition:.5s ease ;
  float:left;
  height:100%;
  width:19%;
  cursor:pointer;
  position:relative;
  font-family:arial;
  font-size:20px;
  text-align:center;
  line-height:65px;
  border-top:1px solid;
}
[class*="col"]:hover{
  background:#f3f3f3;
  color:#222;
}
.col1:hover ~ .dot{
  margin-left:5%;
}
.col2:hover ~ .dot{
  margin-left:17%;
}
.col3:hover ~ .dot{
  margin-left:29%;
}
.col4:hover ~ .dot{
  margin-left:41%;
}
.col5:hover ~ .dot{
  margin-left:53%;
}