CSS3 stepper without js

I created a stepper with pure css, this is the result



This can be created with the following code

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">

<ol class="stepper">



.stepper {
list-style: none;

.stepper > li {
display: flex;
flex-direction: column;
counter-increment: stepper;
align-items: center;
content: "";
.stepper> li:before {
display: flex;
justify-content: center;
align-items: center;
content: counter(stepper);
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #eee;

.stepper > li:after {
height: 20px;
width: 2px;
display: block;
content: '';
background-color: #888;

/* dont show last step line */
.stepper > li:last-child:after {
display: none;



here you can find the codepen




Post a Comment