CSS列表可以有很多種不同的樣式,但是有一種比較簡單的樣式是沒有標記的列表。這種列表比較適合用于簡單的列表項,例如網站導航、產品特性等等。下面就來介紹一下如何實現沒有標記的CSS列表。
ul { margin: 0; padding: 0; list-style-type: none; } li { line-height: 2; border-bottom: 1px solid #ddd; padding: 0 0 0 20px; position: relative; } li:before { content: ""; display: block; height: 10px; width: 10px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
上面的代碼中,我們先將無序列表的外邊距和內邊距都設為0,然后去掉列表項的默認標記。
接著,我們給每個列表項添加一個:before偽元素,用來模擬列表項前面的點。偽元素這種東西相當于是在每個列表項的前面添加了一個虛擬的元素。我們給這個偽元素添加一個固定大小和顏色,然后通過絕對定位將其放置在列表項前面的位置。
最后,我們設置列表項的padding和邊框來美化列表項的樣式。至此,我們就成功地通過CSS實現了一個沒有標記的列表。