小紅點(diǎn)是常見的UI設(shè)計(jì)元素,常用于標(biāo)注重點(diǎn)或者提示狀態(tài)變化。
在CSS中,可以使用偽元素::before或者::after來創(chuàng)建小紅點(diǎn)。
.red-dot::before{ content:""; display:inline-block; width: 8px; height: 8px; background-color: red; border-radius: 50%; margin-right: 5px; }
代碼中,使用偽元素::before創(chuàng)建一個(gè)空內(nèi)容的內(nèi)聯(lián)塊級(jí)元素,設(shè)置寬高和圓角實(shí)現(xiàn)小圓點(diǎn)的效果,在設(shè)置背景顏色和margin等樣式。
在使用時(shí),可以直接在html元素添加class名稱即可,例如:
<p class="red-dot">這是一段需要標(biāo)注的文本。</p>
以上代碼將在段落前添加一個(gè)小紅點(diǎn),方便用戶快速定位重點(diǎn)內(nèi)容。