CSS伪类选择器在元素前面加小圆点

效果如下：

代码：

HTML

<el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <div class="statuspp">
              <div v-if="scope.row.status == 1">
                <span class="openStatus"></span> //开启
                <div>开启</div>
              </div>
              <div v-else>
                <div class="closeStatus"></div> //关闭
                <div>关闭</div>
              </div>
            </div>
          </template>
</el-table-column>

CSS

.statuspp {
      position: relative;
      .openStatus::before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        left: 10px;
        top: 7px;
        border-radius: 50%;
        background-color: #00a854;
      }
      .closeStatus::before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        left: 10px;
        top: 7px;
        border-radius: 50%;
        background-color: #f04134;
      }
    }