<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
<li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
<li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
</ol>
body {
font-size:14px;
padding: 15px 20px;
}
ol {
list-style-type: none;
counter-reset: num;
position: relative;
margin: 0 0 0 60px;
padding: 15px 0 5px 0;
font-size: 16px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
line-height: 1.4;
}
ol li:after {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -45px;
width: 28px;
height: 28px;
line-height: 28px;
background: #fff;
color: #000;
text-align: center;
font-size: 18px;
border-radius: 50%;
border: 1px solid #ef6780;
}
/* Вертикальная линия */
ol:before {
content: '';
position: absolute;
top: 15px;
bottom: 15px;
left: -30px;
width: 1px;
border-left: 1px solid #ef6780;
}
/* Скрытие линии у последнего li */
ol li:last-child:before {
content: '';
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: -38px;
width: 28px;
background: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.