ul { max-width: 400px; margin: 0 auto; list-style-type: none; counter-reset: steps; margin: 0; font-family: sans-serif; } ul li { padding: 0 0 20px 50px; position: relative; margin: 0; } ul li:after { position: absolute; top: 0; left: 0; content: counter(steps); counter-increment: steps; border: 2px solid #000; border-radius: 50%; display: inline-block; height: 24px; width: 24px; text-align: center; line-height: 24px; background: #fff; } ul li:before { position: absolute; left: 13px; top: 0; content: ""; height: 100%; width: 0; border-left: 2px dashed #000; } ul li:last-of-type:before { border: none; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter