JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrap prev">
    <div class="wrap-inner"></div>
</div>
<div class="wrap current">
    <div class="wrap-inner"></div>
</div>
<div class="wrap">
    <div class="wrap-inner"></div>
</div>

SCSS

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 50px;
}
.wrap {
    float: left;
    background-color: yellow;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    .wrap-inner {
        position: relative;
        width: 16px;
        height: 16px;
        background: gray;
        border-radius: 100%;
        float: left;
    }
    
    &:after, &:before {
        content: "";
        float: left;
        width: 8px;
        height: 1px;
        background-color: green;
        margin-top: 7px;
    }
    &.current:after {
        margin-left: 4px;
        margin-right: 0;
    }
    &.current:before {
        margin-left: 0;
        margin-right: 4px;
    }
    &:first-child:before {
        content: none;        
    }     
    &:first-child:after {
        margin-left: 0;
    }
        
    &:last-child:before {
        margin-left: 0;
    }     
    &:last-child:after {
        content: none;
    }
        
    
    &.prev,
    &.current {
        .wrap-inner {
            background: blue;
        }
    }
    &.current {
        .wrap-inner {
            /* граница для кружка */
            &:after {
                content: "";
                position: absolute;
                top: -4px; 
                left: -4px;
                right: -4px;
                bottom: -4px;
                
                border-radius: 100%;
                border: 1px solid red;
                
                box-sizing: border-box;
            }
        }
        /* &:after {
            content: "";
            margin-left: 4px;
            margin-right: 0;
        }
        &:before {
            content: "";
            margin-left: 0;
            margin-right: 4px;
        } */
        /* если активный пункт - последний */
        &:last-child:before {
            margin-left: 0;
        }     
        &:last-child:after {
            content: none;
        }
    }
}