CSS文字前面有不同颜色的圆

css文字前面有不同颜色的圆

 <span class="circle level1">level1</span>
 <span class="circle level2">level2</span>
 <span class="circle level3">level3</span>

.circle {
      position: relative;
    }
    .level1::before,
    .level2::before,
    .level3::before {
      content: '';
      display: block;
      position: absolute;
      width:8px;
      height:8px;
      top:5px;
      left:-14px;
      border-radius:50%;
    }
    .level1::before{
      background: #F79A54;
    }
    .level2::before{
      background: #76CA9A;
    }
    .level3::before{
      background: #0D8D9C;
    }