将背景颜色添加到列表项目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

回答

相关问题