Steps - it is simple

[zmon]

Create initial divs with borders and margins

<template>
    <div style="width: 300px; margin: 20px;">
        <h5>It is simple</h5>
        <p>To make this number list</p>
        <div class="steps">
            <div class="step">
                <p>Create initial divs with borders and margins</p>
            </div>
            <div class="step">
                <p>Add a box as the before with boarders</p>
            </div>
            <div class="step">
                <p>Change box to a circle</p>
            </div>
            <div class="step">
                <p>Add lables</p>
            </div>
            <div class="step">
                <p>Remove dives extra boarders</p>
            </div>
            <div class="step">
                <p>Remove last div boarder</p>
            </div>
            <div class="step">
                <p>Adjust line widths</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style>
    
    .steps {
        border-color: green;
        border-width: 4px;
        border-style: solid;
        padding: 4px;
    }

    .step {
        border-color: red;
        border-width: 2px;
        border-style: solid;
        padding: 4px;
        margin: 4px;
    }

</style>

Add a box as the before with boarders

We add .step:before to create the box

<template>
   .
   .
   .
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style>

    .steps {
        border-color: green;
        border-width: 4px;
        border-style: solid;
        padding: 4px;
    }

    .step {
        border-color: red;
        border-width: 2px;
        border-style: solid;
        padding: 4px;
        margin: 4px;
    }

    .step:before {
        position: absolute;     /* Makes things work */
        border: 2px solid black;

        width: 30px;    /* Size of label area */
        height:30px;

        /* Add the label */
        content: attr(data-step-label);
        text-align: center;
        background-color: #ffffff;      /* Hides background */
    }
</style>

Positioin things

Adding the code below /* Position things */ will move things around.

<template>
   .
   .
   .
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style>

    .steps {
        border-color: green;
        border-width: 4px;
        border-style: solid;
    }

    .step {

        border-color: red;
        border-width: 2px;
        border-style: solid;

        position: relative;
        margin-left: 35px;
    }

    .step:before {
        position: absolute;   
        border: 2px solid black;

        width: 30px;    
        height:30px;

        content: attr(data-step-label);
        text-align: center;
        background-color: #ffffff;      

       /* Position things */
        left: -35px;
        margin: 0px;

    }


</style>

Big Jump

<template>
    <div style="width: 300px; margin: 20px;">
        <h5>It is simple</h5>
        <p>To make this number list</p>
        <div class="steps">
            <div class="step" data-step-label="1">
                <p>Create initial divs with borders and margins</p>
            </div>
            <div class="step" data-step-label="2">
                <p>Add a box as the before with boarders</p>
            </div>

            <div class="step" data-step-label="2">
                <p>Position things</p>
            </div>

            <div class="step" data-step-label="3">
                <p>Change box to a circle</p>
            </div>
            <div class="step" data-step-label="4">
                <p>Add lables</p>
            </div>
            <div class="step" data-step-label="5">
                <p>Remove dives extra boarders</p>
            </div>
            <div class="step" data-step-label="6">
                <p>Remove last div boarder</p>
            </div>
            <div class="step" data-step-label="7">
                <p>Adjust line widths</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style>

    .steps {
        border-color: green;
        border-width: 4px;
        border-style: solid;

        padding: 15px;
    }

    .step {
        position: relative;

        margin-left: 20px;

        border-left: solid 2px #6c757d;  /* Line of the left */
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 1px;
        padding-left: 34px;
    }

    .step:before {

        border: 2px solid black;
        border-radius: 50%;

        width: 30px;    /* Size of label area */
        height:30px;

        /* Add the label */
        content: attr(data-step-label);
        text-align: center;
        background-color: #ffffff;      /* Hides background */

        position: absolute;     /* Makes things work */
        left: -16px;
        margin: 0px;

    }

    .step:last-child {
        border-left: none;
        left: 2px;              /* Last circle needed to be adjusted for some reason */
    }

</style>

Add lables

Remove dives extra boarders

Remove last div boarder

Adjust line widths