Is it possible to somehow make the text that is written in the <li> tag to the left of the mar-CodePudding

this is my first question on stackoverflow.com, sorry if that. My problem is that I can't make the text that is written in the <li> tag 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 >
    <li >Знакомство с клиентом, описание заказа</li>
    <li >Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li >Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li >Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li >Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li >Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li >Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li >Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li >Доставка по индрайверу или самовывоз</li>
</ol>

must be done as in the photo enter image description here

I don't have any idea how to implement it

thanks in advance!

CodePudding user response：

I add CSS for left & right alignment, you have to use "nth:child(odd) & nth:child(even)" using this you can easily set your Timeline Layout.

        .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: 100%;
    z-index: -1;
}

.end::after {
    display: none;
}

/*add this CSS*/


ol.stages {
    max-width: 500px;
    margin: 0 auto;
}

ol.stages li.stages__working {
    max-width: 185px;
    font-family: sans-serif;
}

ol.stages li.stages__working:nth-child(even) {
    margin: 0 0 0 auto;
}

ol.stages li.stages__working:nth-child(odd)::after {
    left: unset;
    right: -50px;
    top: 30px;
}

ol.stages li.stages__working:nth-child(odd)::before {
    left: unset;
    right: -62px;
}

ol.stages li.stages__working:nth-child(even)::after {
    right: unset;
    left: -45px;
    top: 0;
}

ol.stages li.stages__working:nth-child(even)::before {
    right: unset;
    left: -57px;
}

<ol >
    <li >Знакомство с клиентом, описание заказа</li>
    <li >Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li >Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li >Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li >Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li >Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li >Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li >Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li >Доставка по индрайверу или самовывоз</li>
</ol>

CodePudding user response：

You used absolute to reposition items and locate to left them. just edit .stages__working::before and .stages__working::after css change left to right for quick fix. Try this one.

.stages{
    list-style-type: none; 
    counter-reset: num;
    margin: 0 45px 0 0 ;
    padding: 15px;
    font-size: 12px;
    max-width:100%;
    position: relative;
}
.stages__working{
    position: relative; 
    margin: 0 ;
    padding: 8px 0 45px 20px;
    line-height: 1.4;
    width:500px;
    max-width:100%;
}
.stages__working::before {
    content: counter(num); 
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -14px;
    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;
    right: 0%;
    background-color: #95E1E1;
    width: 5px;
    margin-top: 0;
    height: 85px;
    z-index: -1;
}

.end::after {
    display: none;
}

<ol >
    <li >Знакомство с клиентом, описание заказа</li>
    <li >Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li >Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li >Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li >Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li >Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li >Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li >Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li >Доставка по индрайверу или самовывоз</li>
</ol>

CodePudding user response：

with using nth-child(odd) you can do it?
and this is responsive ;)

.stages{
    list-style-type: none; 
    counter-reset: num;
    margin: 0 45px 0 50% ;
    padding: 15px;
    font-size: 12px;
    max-width:100%;
    position: relative;
}
.stages__working{
    position: relative; 
    margin: 0 ;
    padding: 8px 30px 45px 30px;
    line-height: 1.4;
    width:500px;
    max-width:100%;
}
.stages__working::before {
    content: counter(num); 
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -13px;
    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: 0%;
    top: 0;
    background-color: #95E1E1;
    width: 5px;
    margin-top: 0;
    height: 100%;
    z-index: -1;
}
.stages__working:nth-child(odd){
  text-align: right;
  transform: translateX(-100%);
}
.stages__working:nth-child(odd):after{
  left: 100%;
}

.stages__working:nth-child(odd):before{
  left: calc(100% - 13px);
}
.end::after {
    display: none;
}

<ol >
    <li >Знакомство с клиентом, описание заказа</li>
    <li >Мы скидываем примеры своих работ, также ссылку на 
        инстаграм</li>
    <li >Отработка заказа, исходные данные от клиента и все это 
        отправляем дизайнеру</li>
    <li >Макет от дизайнера клиенту даем на утверждение, 
        обсуждаем детали рисунка, вносим изменения и корректировки.</li>
    <li >Подбор футболки, толстовки: цвет, размер, ткань, 
        производителя. Делаем замеры в случае необходимости.</li>
    <li >Макет готов, футболка тоже, запускаем в 
        производство</li>
    <li >Распечатываем рисунок на бумаге, выясняем место 
        расположения рисунка</li>
    <li >Заказ выполнен, упаковываем, кладем инструкцию, планер в 
        подарок</li>
    <li >Доставка по индрайверу или самовывоз</li>
</ol>