JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Простая строка</li>
  <li>Многострочная<br>текстовая строка</li>
  <li>Еще одна простая строка</li>
  <li>И еще одна большая<br>многострочная<br>текстовая строка</li>
</ul>

CSS

* { margin: 0; padding: 0; 
  background-color: #fff;}
ul { list-style: none; }

ul {
  margin-left: 20px;
  position: relative;
  background-color: #fff;
}
li {
  padding: 5px 0;
  padding-left: 15px;
  position: relative;
  border-left: 2px solid #999;
  background-color: #fff;
  z-index: 4;
}
li:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  left: -5px;
  top: 50%;
  margin-top: -4px;
  z-index: 6;
}
li:first-child:after {
  content: '';
  width: 15px;
  height: 50%;
  left: -8px;
  top: 0;
  position: absolute;
  background-color: #fff;
  z-index: 5;
}
li:last-child:after {
  content: '';
  width: 15px;
  height: 50%;
  left: -8px;
  bottom: 0;
  position: absolute;
  background-color: #fff;
  z-index: 5;
}