CSS中的列表樣式十分豐富,除了常見的數字和字母列表外,還可以自定義符號和形狀。在這些列表樣式中,小圓點列表是最常見和基礎的一種。
ul { list-style: none; padding-left: 0; } ul li:before { content: "?"; margin-right: 8px; }
上述CSS代碼可以讓無序列表中的每個項目前都添加一個小圓點。其中,list-style屬性將列表標記設置為none,即不顯示默認的列表標記。接著,使用:before偽元素在每個li之前插入一個內容為"?"的元素,同時設置間距8px使其與文字對齊。
如果想要改變小圓點的大小和顏色,可以在:before偽元素中添加一些其他的屬性:
ul li:before { content: "?"; margin-right: 8px; font-size: 20px; color: red; }
上述代碼會將小圓點的大小設置為20px,顏色設置為紅色。
除此之外,我們還可以使用其他符號或自定義形狀來代替小圓點。比如,下面的代碼將列表標記設置為三角形:
ul li:before { content: "?"; margin-right: 8px; font-size: 20px; color: blue; }
使用CSS列表樣式可以讓列表更加美觀和易讀,同時也為網站風格統一提供了方便。
上一篇css列表下拉菜單