[英]Can you style ordered list numbers in javascript? If so, how?
[英]Can you style ordered list numbers?
我正在尝试为有序列表中的数字设置样式,我想添加背景颜色、边框半径和颜色,以便它们与我正在使用的设计相匹配:
我想这是不可能的,我必须为每个数字使用不同的图像,即
ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');}
etc...
有没有更简单的解决方案?
您可以使用CSS counters结合:before
伪元素来完成此操作:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }
<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>
我正在寻找不同的东西,并在 CodePen 上找到了这个例子;
试试这个: http : //codepen.io/sawmac/pen/txBhK
body { font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, sans-serif; margin: 50px; } .custom-counter { margin: 0; padding: 0; list-style-type: none; } .custom-counter li { counter-increment: step-counter; margin-bottom: 5px; } .custom-counter li::before { content: counter(step-counter); margin-right: 20px; font-size: 80%; background-color: rgb(180, 180, 180); color: white; font-weight: bold; padding: 3px 8px; border-radius: 11px; }
<ol class="custom-counter"> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li> </ol>
2021 更新,您可以在最近的浏览器中使用::marker
伪元素选择器: https : //developer.mozilla.org/en-US/docs/Web/CSS/ ::marker
li::marker { color: red; } li { color: blue; }
<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.