dots example

by Richard Hunter

HTML

<div class='container'>
    <div class='dots'></div>
</div>

CSS

.container {
    width : 50%;
    height : 200px;
    border : solid 1px black;
    margin : auto;
    text-align : center;
    padding-top : 24px;
}
.dots {
    margin-bottom : 24px;
    position : relative;
    background : red;
}
.dots, .dots:before, .dots:after {
    border-radius : 50%;
    padding : 10px;
    display : inline-block;
}
.dots:before, .dots:after {
    content : '';
    position : absolute;
    top : 0;
}
.dots:before {
    left : -200%;
    background : green;
}
.dots:after {
    left : 200%;
    background : blue;
}