在边框上创建一个带有数字圆圈的CSS表

<style>
    .circle {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ccc;
        border: 2px solid #000;
    }

    .circle::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #000;
    }

    .circle span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        font-size: 20px;
    }
</style>

<div class="circle">
    <span>1</span>
</div>