本文目錄導讀：

1. 使用CSS的偽元素“::before”
2. 使用CSS的Flexbox布局

CSS技巧：在字段前添加小黑點

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要在列表或者字段前添加小黑點以增強頁面的可讀性，這種簡單的裝飾可以通過CSS輕松實現(xiàn)，本文將介紹如何使用CSS在字段前添加小黑點。

使用CSS的偽元素“::before”

我們可以利用CSS的偽元素“::before”在字段前添加內(nèi)容，包括小黑點，以下是一個簡單的例子：

li::before {
    content: "? ";  /* 小黑點的Unicode字符 */
}

在這個例子中，我們?yōu)榱斜眄棧╨i）的偽元素“::before”添加了內(nèi)容，即一個Unicode字符的小黑點，這樣，每個列表項前都會顯示一個小黑點。

使用CSS的Flexbox布局

另一種方法是使用CSS的Flexbox布局，我們可以創(chuàng)建一個包含小黑點的圖標和一個文本字段的容器，然后使用Flexbox的布局屬性將它們放在一起，以下是一個例子：

.item {
    display: flex;  /* 開啟Flexbox布局 */
    align-items: center;  /* 垂直居中對齊 */
}
.item-icon {
    width: 10px;  /* 設(shè)置圖標寬度 */
    height: 10px;  /* 設(shè)置圖標高度 */
    background-color: black;  /* 設(shè)置圖標顏色 */
    border-radius: 50%;  /* 將圖標設(shè)置為圓形 */
    margin-right: 5px;  /* 設(shè)置圖標與文本之間的間距 */
}

在這個例子中，我們創(chuàng)建了一個包含圖標和文本的容器，并使用Flexbox布局將它們放在一起，通過設(shè)置適當?shù)臉邮?，我們可以?chuàng)建一個看起來像小黑點的圖標，我們將這個圖標和文本字段放在一起，形成一個帶有小黑點的字段，這種方法適用于更復雜的情況，比如需要自定義圖標大小、顏色等。