本文目錄導(dǎo)讀：

1. 使用CSS偽元素 ::before
2. 使用字體圖標(biāo)
3. 使用背景圖像

CSS技巧：文本前添加黑點(diǎn)標(biāo)記

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要在文本前添加小黑點(diǎn)作為標(biāo)記，以增強(qiáng)文本的可讀性和辨識(shí)度，這種設(shè)計(jì)通常用于列表或者標(biāo)簽等場(chǎng)景，使用CSS可以輕松實(shí)現(xiàn)這一功能，本文將介紹幾種常用的方法。

使用CSS偽元素 ::before

CSS偽元素 ::before 可以用于在元素內(nèi)容前插入內(nèi)容，包括小黑點(diǎn)，以下是一個(gè)簡(jiǎn)單的示例：

p::before {
    content: "? ";  /* 在文本前添加一個(gè)黑點(diǎn) */
}

這種方法適用于所有文本段落，只需將樣式應(yīng)用到相應(yīng)的元素即可。

使用字體圖標(biāo)

另一種方法是使用字體圖標(biāo)庫(kù)，如Font Awesome等，這些庫(kù)提供了豐富的圖標(biāo)，包括黑點(diǎn)，你可以將圖標(biāo)作為文字的一部分顯示，或者作為背景圖像顯示，這種方法更加靈活，可以自定義圖標(biāo)的樣式和大小。

使用背景圖像

除了上述兩種方法，還可以使用背景圖像來(lái)顯示黑點(diǎn)，這種方法適用于需要更復(fù)雜布局的場(chǎng)景，你可以使用CSS的background屬性來(lái)設(shè)置背景圖像，并使用padding或margin來(lái)調(diào)整圖像的位置，以下是一個(gè)簡(jiǎn)單的示例：

p {
    background-image: url("bullet.png");  /* 替換為你的黑點(diǎn)圖像路徑 */
    background-repeat: no-repeat;  /* 不重復(fù)顯示圖像 */
    background-position: 0 50%;  /* 將圖像定位在文本前 */
    padding-left: 20px;  /* 調(diào)整文本的左邊距，以適應(yīng)圖像 */
}

三種方法都可以實(shí)現(xiàn)文本前顯示黑點(diǎn)的效果，你可以根據(jù)具體需求和場(chǎng)景選擇合適的方法，使用CSS偽元素 ::before 的方法簡(jiǎn)單直接，適用于大多數(shù)場(chǎng)景；使用字體圖標(biāo)的方法更加靈活；使用背景圖像的方法適用于需要更復(fù)雜布局的場(chǎng)景，在實(shí)際應(yīng)用中，可以根據(jù)需要選擇合適的方法來(lái)實(shí)現(xiàn)設(shè)計(jì)效果。