JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>Питание</li>
<li>Страховка</li>
<li>Прогулка на карте</li>
<li>Музей</li>
</ul>
CSS
ul
{
background: #fff;
list-style: none;
margin: 0;
padding: 10px;
width: 300px;
}
li
{
border-top: 1px solid #ccc;
padding: 5px 0;
position: relative;
}
li:first-child
{
border: none;
}
li:first-child::after,
li:first-child::before
{
display: none;
}
li::after,
li::before
{
background-color: #ccc;
content: ' ';
height: 1px;
position: absolute;
top: -1px;
width: 60px;
}
li::after
{
background-image: -webkit-linear-gradient(left, #fff 20%, transparent);
background-image: -o-linear-gradient(left, #fff 20%, transparent);
background-image: linear-gradient(to right, #fff 20%, transparent);
left: 0;
}
li::before
{
background-image: -webkit-linear-gradient(right, #fff 20%, transparent);
background-image: -o-linear-gradient(right, #fff 20%, transparent);
background-image: linear-gradient(to left, #fff 20%, transparent);
right: 0;
}