How to implement a vertical scale with numbers in HTML and CSS

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: tomato; } ol { list-style: none; color: #fff; counter-reset: count; padding: 1em; position: relative; } ol:before { content: ''; position: absolute; top: 40px; left: 50%; width: 2px; height: 80%; background: #fff; margin-left: -1px; } ol > li { position: relative; margin: 20px 0; padding-right: calc(50% + 28px); } ol > li:nth-child(even) { padding-right: 0; padding-left: calc(50% + 28px); } ol > li:before { counter-increment: count; content: counter(count)" "; position: absolute; top: 0; left: 50%; margin-left: -14px; width: 28px; height: 28px; line-height: 28px; border: 2px solid #fff; background: tomato; z-index: 1; color: #fff; text-align: center; border-radius: 50%; box-sizing: border-box; } 

 <ol> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> <li>Как реализовать такой список с номерами на Html и Css</li> </ol>