純CSS如何實現狀態圓點

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

Html: 我的是一個<i class="circle"></i>圓點

效果：