JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

CSS

ul{

  list-style:none;
  background: #333;
  margin:0;
  padding:0;
  overflow:hidden;
}
ul li{
  float:left;
  width:25%;
}
ul li a{
  //box-sizing: border-box;
  width:100%;
  text-decoration:none;
  padding:14px 0;
  display:inline-block;
  color:white;
  text-align:center;
 
}
ul li a:hover{
 //box-sizing: border-box;
 background-color: #111;
 border-left: 4px solid red;
}
/*
ul li a::after
{
   display:block;
   content:'';
   overflow:hidden;
   border-left: 4px solid red;
   visibility:hidden;

}*/
@media  screen and (max-width: 500px) {
  ul{
    width:25%;
    min-width:120px;
    height:100%;
  }
  ul li{
      float:none;
      width:100%;
  }
  
}