Как на веб-странице сделать слитые маркеры у списка

ul { 
  list-style: none; 
} 
ul li { 
  position: relative; 
} 
ul li::before, ul li::after { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: -33px; 
  top: 7px; 
  background-color: red; 
} 
ul li::before { 
  width: 30px; 
  height: 2px; 
} 
ul li::after { 
  width: 2px; 
  height: 100%; 
} 
ul li:last-child::after { 
  content: none; 
} 
ul ol { 
  list-style: none; 
  position: relative; 
} 
ul ol::before, ul ol::after { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: -15px; 
  top: -10px; 
  background-color: red; 
} 
ul ol::before { 
  width: 2px; 
  height: 50%; 
} 
ul ol::after { 
  top: 7px; 
  width: 22px; 
  height: 2px; 
}

<ul> 
  <li>1</li> 
  <li>2</li> 
  <li>3 
  <ol> 
    <li>Под 1</li> 
    <li>Под 2</li> 
  </ol> 
  </li> 
   
</ul>