JSFiddle - React, Tailwind, and code Playground

HTML

<div><ul>
    <li>
    <a> текст </a>
    </li>
    <li>
    <a> текст </a>
    </li>
        <li>
    <a> текст </a>
    </li>
        <li>
    <a> текст </a>
    </li>
    <li>
    <a> текст </a>
    </li>
        <li>
    <a> текст </a>
    </li> 
    </ul>
</div>

CSS

li{
margin:30px;
width:100px;        
height:30px;
    /*
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
      */  
position:relative;  
    display:inline-block;

}

li:before {
content:'';
position:absolute;
width:1px;
top:10px;
bottom:15px;
background:red;    
}
li:after {
content:'';
position:absolute;
width:1px;
top:5px;
bottom:5px;
background:#222;    
}


li:before{
left:0px;
}

li:after{
right:0px;
}

li:first-child:before{
background:none;
}

a {
margin-left:5px;
    font: 18px/18px Arial, Tahoma, Verdana, sans-serif
}