CSS3 stepper without js

on   with No comments

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

 

 

This can be created with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stepper</title>

    <ol class="stepper">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

</head>
<body>

<style>

    .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;
     }





</style>

</body>
</html>
 

here you can find the codepen

https://codepen.io/naveen17797/pen/RwBVeZy

Share:

0 comments:

Post a Comment