How can I change this CSS layout from horizontal to vertical?

I found a really cool example of how you can make a subway-map style list, and I started playing around with it for a few hours, adding my own styling. It has been super fun.
But I am wondering if it is possible to change this into a vertical layout, instead of horizontal?
I am specifically talking about the little line that goes between each “stop”.

Source link: https://wdrfree.com/90/pure-css-simple-metro-station-map

The original code

li a{
 position:absolute;
 top:-60px;
 color:#fff;
 /* Safari */
 -webkit-transform: rotate(-45deg);
 
 /* Firefox */
 -moz-transform: rotate(-45deg);
 
 /* IE */
 -ms-transform: rotate(-45deg);
 
 /* Opera */
 -o-transform: rotate(-45deg);
 
 /* Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 width:100px;
 text-decoration:none;
 
}

ul{
 position:absolute;
 top: 50%;
 transform: translate(0%, -50%);;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 width:100%;
 padding-left:0px;


 
}

li:hover{
 background-color:#fff;
}

li {
 position:relative;
 text-decoration:none;
 list-style-type:none;
 width:20px;
 height:20px;
 border:5px solid #900;
 border-radius: 100%;
 display:inline-block;
 margin-right:20px;

}

li::before {
 content: "";
 display: block;
 width:25px;
 border-top:5px solid #900;
 border-bottom:5px solid #900;
 height:5px;
 margin-left:23px;
 margin-top:3px;
} 

li:last-child::before {
 display:none;
 
}

li:last-child {
 margin-right:0;
 
}

My code:

.map li a{
  position:absolute;
  color:white;
  text-decoration:none;
  padding-left: 20px;
  width: 200px;
  
  
 }
 
 .map ul{
  position:absolute;
  margin-top: 300px;
  width:100%;
  padding-left:200px;
 
 }
 
 .map li:hover{
  background-color:#fff;
 }
 
 .map li {
  position:relative;
  text-decoration:none;
  list-style-type:none;
  width:30px;
  height:30px;
  border:5px solid #900;
  border-radius: 100%;
  margin-right:50px;
  font-size: 1.0em;
 
 }
 
 .map li::before {
  content: "";
  width:32px;
  border-top:3px solid #900;
  border-bottom:3px solid #900;
  height:5px;
  margin-top:7px;
 } 
 
 .map li:last-child::before {
  display:none;
  
 }
 
 li:last-child {
  margin-right:0;
  
 }
  
a:last-child {
  margin-left:25px;
} 

So far, so good.
I got the lines to become vertical.
The only thing I need now is to place them between the list-item circle, and not inside of it.
Any ideas?
circle

.map li a{
  position:absolute;
  color:white;
  text-decoration:none;
  padding-left: 20px;
  width: 200px;
  
  
 }
 
 .map ul{
  position:absolute;
  margin-top: 150px;
  width:100%;
  padding-left:200px;
 
 }
 
 .map li:hover{
  background-color:#fff;
 }
 
 .map li {
  position:relative;
  text-decoration:none;
  list-style-type:none;
  width:30px;
  height:30px;
  border:5px solid #900;
  border-radius: 100%;
  margin-right:50px;
  font-size: 1.0em;
  margin-top: 10px;
 
 }
 
 .map li::before {
  content: "";
  width:32px;
  border-left:3px solid #900;
  border-right:3px solid #900;
  height:15px;
  margin-left:7px;
  top: 20px;
 } 
 
 .map li:last-child::before {
  display:none;
  
 }
 
 li:last-child {
  margin-right:0;
  
 }
  
a:last-child {
  margin-left:25px;
}