CSS: How to draw vertical line with lables on line - html

Question

I have a homework in CSS.
My job is to draw a route of bus.
This is my html:
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 1</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 2</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
</div>
</div>
I have to style it like The pircture below:
Stops are grouped by city.
Each group has a Vertical bracket on left.
Rotated label with City name On the bracket line.
I tried this css, but i don't now how to make it work...
Here is link for JsFiddle:
https://jsfiddle.net/edm6qrt2/
I prefare to use modern CSS, including flex or grid.
I need suppoort only for Google Chrome.
Thenk's for any help!

Answer 1

One approach would be to use pseduo elements to create the left-most vertical line
that spans the height of the city group.
Additionally, you could align the city-name along that vertical line via a CSS transform, as documented in the code snippet below:
.city-group {
position:relative;
/* Create space to left of city group to
accomodate the city name and lines */
padding-left:2rem;
}
/* Define pseudo element for vertical black
line to the left, spanning the vertical axis
of the city group */
.city-group:before {
content:"";
display:block;
border-left:1px solid black;
left:.75rem;
top:1rem;
bottom:1rem;
position:absolute;
}
/* Transform the city name with translation and
rotation to place in line with line spanning left
of city group */
.city-name {
transform: translate(-50%, 0%) rotate(-90deg) translateY(50%);
position: absolute;
left: 0;
top: 50%;
margin-top:-0.5em;
border:2px solid orange;
background:white;
padding:0 1rem;
z-index:1;
}
/* Create spacing above/below each stop */
.stop {
padding:0.5rem 0;
position:realtive;
}
/* Style pseudo elements for first and last
stop which are the horizontal line segments
for these stops. These line segments connect
with the vertical line defined above */
.stop:first-child:before,
.stop:last-child:before {
content:"";
display:block;
border-top:1px solid black;
left:.75rem;
width:0.75rem;
position:absolute;
}
/* Offset first line segement from top of
city group */
.stop:first-child:before {
top:1rem;
}
/* Offset last line segement from bottom of
city group */
.stop:last-child:before {
bottom:1rem;
}
<div class="city-group">
<div class="city-name">
City 1
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name">
Long City 2
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
<div class="stop">Stop 9</div>
<div class="stop">Stop 10</div>
</div>
</div>