纯CSS如何实现状态圆点

.circle {
    display: inline-block;
     12px;
    height: 12px;
}
.circle:after {
    content: '';
    margin: 3px;
    display: table;
     6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

Html: 我的是一个<i class="circle"></i>圆点

效果：