將背景顏色添加到列表項目bullet

我有一個有序列表（a，b，c ...）並且想要使實際項目符號（a，b，c ...）的背景顏色具有不同的顏色。我如何設計這個？列表類型屬性似乎只改變了項目符號，不給他們添加樣式。我想維護他們type =「a」的列表結構，並簡單地爲每個字母添加背景顏色。將背景顏色添加到列表項目bullet

另外...有人可以與我分享如何集中子彈或沖刷到一邊嗎？目前，他們看起來有點不合時宜。

來源

2014-05-08 seamlessTL

這將真正幫助的人，如果你把你的文章或更好一些示例代碼和你的HTML和CSS的[的jsfiddle（http://jsfiddle.net），並鏈接到它。 –

查看我的演示http://jsfiddle.net/viphalongpro/Hj8Nn/，對於字母，只需用'content：counter（index，lower-alpha）'替換'content：counter（index）'' –

您可以使用第n個子選擇器和僞元素設置它們的樣式。

ul li:before { 
    content: "• "; 
    background-color: red; 
}

Fiddle demo

來源

2014-05-08 21:43:21 Jonathan

我相信OP正在尋找改變背景顏色，而不是子彈的顏色。另外，你爲什麼只將它應用於一個？並且該演示頁面與此問題無關 –

您是對的，已編輯。 – Jonathan

默認的list-style：lower-alpha在最後加上點。它似乎內容：計數器（索引，低alpha）不添加點？ – JohanVdR

使用@以上金剛的評論，你可以做這樣的事情：

ul > li:before { 
    background-color: red; 
    margin-right: 5px; 
    padding: 0 5px; 
    content: counter(index, lower-alpha); 
    counter-increment:index; 
} 
li:first-child { 
    counter-reset:index; 
} 
ul li { 
    list-style: none; 
}

這裏是一個小提琴：http://jsfiddle.net/2ZsQY/

來源

2014-05-08 21:55:15

肯定是更好的答案，當我意識到OP想要更低的alpha值時，我正在查看計數器。 – Jonathan

http://jsfiddle.net/Ue6nu/2/

默認的低即使在什麼時候-alpha也會被保存下來：以前不支持。

ul {font: 0.85em Arial;margin:0;} 
li { 
    list-style-position: outside; 
    list-style-type: lower-alpha; 
    position:relative; 
} 
li:first-child { 
    counter-reset:index; 
} 
li:before { 
    content: counter(index, lower-alpha) '.'; 
    counter-increment:index; 
    background: #fff; 
    position:absolute; 
    left:-1.3em; 
    z-index:10; 
    display:inline-block; 
    width:1em; 
    color: red; 
    font-size: inherit; 
    font-weight:bold; 
}

來源

2014-05-08 22:08:16 JohanVdR

哦，我看到（將更新答案）使用計數器增量... – JohanVdR

將背景顏色添加到列表項目bullet

回答

相關問題