Hello everyone, it's my debut question on stackoverflow.com so please bear with me. My issue revolves around aligning the text within the <li> tags to the left of the markers.
.stages{
list-style-type: none;
counter-reset: num;
margin: 0 0 0 45px;
padding: 15px;
font-size: 12px;
}
.stages__working{
position: relative;
margin: 0 ;
padding: 8px 0 45px 20px;
line-height: 1.4;
}
.stages__working::before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -23px;
width: 30px;
height: 30px;
background: #95E1E1;
color: #fff;
text-align: center;
line-height: 28px;
font-size: 14px;
border-radius: 50%;
}
.stages__working::after {
content: "";
position: absolute;
left: -2%;
background-color: #95E1E1;
width: 5px;
margin-top: 0;
height: 85px;
z-index: -1;
}
.end::after {
display: none;
}<ol class="stages">
<li class="stages__working">Introduction to client, project description</li>
<li class="stages__working">Showcasing our work samples, including Instagram link</li>
<li class="stages__working">Processing order, gathering client data and forwarding to designer</li>
<li class="stages__working">Presenting designer’s layout for client approval, discussing artwork details, making changes and adjustments.</li>
<li class="stages__working">Selecting T-shirt, hoodie: color, size, fabric, manufacturer. Taking measurements if necessary.</li>
<li class="stages__working">Layout is ready, T-shirt as well, moving forward to production</li>
<li class="stages__working">Printing design on paper, determining location placement of artwork</li>
<li class="stages__working">Order completed, packaging, adding instructions, planner as gift</li>
<li class="stages__working end">Delivery via Indriver or self-pickup</li>
</ol>The desired outcome should resemble the image shown in this picture enter image description here
I'm open to suggestions on how to achieve this. Thank you in advance!