css伪类-小圆点

大家好，欢迎来到IT知识分享网。

项目需求：在每个单元格的前面加一个小圆点，效果图如下：

搜了一大堆文章，加小圆点的方法无非就是设置width、height、border-raduis。可是来来回回试了好多遍，就是样式加不上，汗颜~

偶然间看一大神说必须加上display:inline-block;才会生效，我的天呐，不会是真的吧。对，就是这个样子滴，附上完整的代码，可随意ctrl c+v

<!--html-->
<div class="headers">
    <div class="header">美句子哈哈</div>
    <div class="con-items">
        <div class="item">山有木兮木有枝，心悦君兮君不知。</div>
        <div class="item">人生若只如初见，何事秋风悲画扇。</div>
        <div class="item">十年生死两茫茫，不思量，自难忘。</div>
        <div class="item">曾经沧海难为水，除却巫山不是云。</div>
        <div class="item">玲珑骰子安红豆，入骨相思知不知。</div>
        <div class="item">只愿君心似我心，定不负相思意。</div>
        <div class="item">平生不会相思，才会相思，便害相思。</div>
        <div class="item">入我相思门，知我相思苦。</div>
    </div>
</div>

.headers {
    border-radius: @border-radius;
    border: 1px solid @border-hr-color;
    margin: 15px 0 24px;
    overflow: hidden;
    .header {
        background-color: @table-th-bg;
        height: 42px;
        line-height: 42px;
        color: @font-content-color;
        font-weight: bold;
        padding-left: 16px;
    }
    .con-items {
        display: flex;
        flex-wrap: wrap;
    }
    .item {
        position: relative;
        cursor: default;
        box-sizing: border-box;
        width: calc((100% + 3px) / 3);
        border: 1px solid @border-hr-color;
        height: 41px;
        line-height: 41px;
        padding-left: 32px;
        margin-bottom: -1px;
        margin-left: -1px;
        font-size: @font-size-normal;
        color: @primary-blue-color;
    }
    .item:nth-child(3n+0) { // 此行为了解决细线边框问题
        border-right: none;
    }
    .item::before { // 小圆点在这里
        content: '';
        position: absolute;
        left: 16px;
        top: 45%;
        border: 1px solid @primary-blue-color;
        background-color: @primary-blue-color;
        display: inline-block; // 此句为css样式展示重点🏁
        width: 3px;
        height: 3px;
        border-radius: 50%;
        margin-right: 12px;
    }
}

预告：下周vue3异步组件，敬请期待！