項(xiàng)目需求：在每個(gè)單元格的前面加一個(gè)小圓點(diǎn)，效果圖如下：

效果圖.jpg

搜了一大堆文章，加小圓點(diǎn)的方法無(wú)非就是設(shè)置width、height、border-raduis?？墒莵?lái)來(lái)回回試了好多遍，就是樣式加不上，汗顏~

偶然間看一大神說(shuō)必須加上display:inline-block;才會(huì)生效，我的天吶，不會(huì)是真的吧。對(duì)，就是這個(gè)樣子滴，附上完整的代碼，可隨意ctrl c+v

美句子哈哈山有木兮木有枝，心悅君兮君不知。人生若只如初見(jiàn)，何事秋風(fēng)悲畫扇。十年生死兩茫茫，不思量，自難忘。曾經(jīng)滄海難為水，除卻巫山不是云。玲瓏骰子安紅豆，入骨相思知不知。只愿君心似我心，定不負(fù)相思意。平生不會(huì)相思，才會(huì)相思，便害相思。入我相思門，知我相思苦。

.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) { // 此行為了解決細(xì)線邊框問(wèn)題

border-right: none;

}

.item::before { // 小圓點(diǎn)在這里

content: '';

position: absolute;

left: 16px;

top: 45%;

border: 1px solid @primary-blue-color;

background-color: @primary-blue-color;

display: inline-block; // 此句為css樣式展示重點(diǎn)🏁

width: 3px;

height: 3px;

border-radius: 50%;

margin-right: 12px;

}

}

總結(jié)

以上是生活随笔為你收集整理的在html中怎样加圆点,css伪类-小圆点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。