CSS的文字前圓點圖標，也稱為列表標記，主要是用來美化排版的一種方式，給排版增加一些裝飾性的效果。通常我們使用的有兩種方式：使用實心圓作為列表標記和使用圖片作為列表標記。下面分別介紹這兩種方式的實現方法。

/* 使用實心圓作為列表標記的CSS樣式 */
ul {
list-style-type: disc; /* 設置列表標記為實心圓 */
margin-left: 2em;
}
/* 使用圖片作為列表標記的CSS樣式 */
ul {
list-style-image: url('圖片地址'); /* 設置列表標記為圖片 */
margin-left: 2em;
}

當然，我們也可以自定義列表標記的圖案。這需要使用CSS3中的偽元素::before和::after。我們可以使用CSS3中的content屬性來設置偽元素的內容，然后通過配合其他屬性，如display和border-radius等，來實現不同的圖案效果。

/* 自定義列表標記的CSS樣式 */
ul {
list-style: none; /* 去除默認的列表標記樣式 */
margin-left: 2em;
}
ul li::before {
content: "·"; /* 使用實體字符作為偽元素的內容 */
display: inline-block;
width: 1em;
margin-left: -1em;
text-align: right;
color: #ccc;
border-radius: 50%; /* 將實體字符圓形化 */
margin-right: 0.5em;
}
ul li::after {
content: ""; /* 清除偽元素的內容 */
}

這樣，在我們的頁面中就可以實現各種樣式獨特的文字前圓點圖標效果了。當然，我們還需要注意在使用自定義圖案時，偽元素的高度和寬度的設置等細節問題，以達到更好的排版效果。