無序列表是在網頁中經常使用的一種列表形式，它允許我們用簡單的文字描述來列舉重要的信息。有時候，我們需要給這些列表加上一些裝飾性的圖案來讓它更加吸引人的眼球。在web開發中，CSS可以很好的完成這個任務。

ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
li {
margin-bottom: 10px;
padding-left: 40px;
}
li:before {
content: "";
position: absolute;
background-color: #000;
width: 20px;
height: 20px;
top: 7px;
left: 10px;
border-radius: 50%;
}
li:after {
content: "";
position: absolute;
width: 5px;
height: 16px;
top: 17px;
left: 18px;
background: #000;
transform: rotate(50deg);
}

在這段代碼中，我們首先將無序列表的樣式設置成不帶有標記的列表（list-style: none）。接著，我們將整個列表的外邊距和內邊距都設置為0，這樣就讓列表放到它所在的位置上。

接著，我們將每一個列表項的底部空間（margin-bottom）增大一些，以便讓它們之間產生一定的間隔，并且將每個列表項的左邊緣都設置成了一個40像素的填充（padding-left）。

現在來到了我們給列表項加上圖案的環節。我們為每個列表項的前面添加一個幾何圖案（:before偽元素），通過absolute的定位和background-color的背景顏色來實現一個黑色的小圓形。然后，我們再用一個“:after”偽元素來創建一個小箭頭，它既動態又細致。

最后，我們將這個樣式應用到整個列表元素中，完成了一個又好看又實用的無序列表圖案！