JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<ul>
  <li><a href="#">Item #1</a></li>
  <li><a href="#">Item #2</a></li>
  <li><a href="#">Item #3</a></li>
  <li><a href="#">Item #4</a></li>
  <li><a href="#">Item #5</a></li>
  <li><a href="#">Item #6</a></li>
</ul>

CSS

*{
  box-sizing: border-box;
}
ul{
  margin: 25px 0;
  text-align: center;  
  font-size: 0;  
}
ul > li {
  display: inline-block;
  vertical-align: top;
  font-size: 20px;  
  position: relative;    
}
ul > li:before,
ul > li:after{
  content: '';
  position: absolute; top: 0; right: 0;
  width: 2px;
  height: 100%;
  background: #f00;
}
ul > li:first-child:before{
  left: 0;
}
ul > li > a{
  display: block;
  padding: 10px 20px;
  color: #fff;
  background: #00f;  
}
ul > li > a:hover{
  background: green;
}