在html中怎样加圆点,css伪类-小圆点

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

效果图.jpg

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

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

美句子哈哈

山有木兮木有枝，心悦君兮君不知。

人生若只如初见，何事秋风悲画扇。

十年生死两茫茫，不思量，自难忘。

曾经沧海难为水，除却巫山不是云。

玲珑骰子安红豆，入骨相思知不知。

只愿君心似我心，定不负相思意。

平生不会相思，才会相思，便害相思。

入我相思门，知我相思苦。

.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;

}

}