我需要创建一组列表项,我需要使用border-radius和background颜色设置列表项编号(小数)的样式。
以下是我希望列表项看起来如何的快照。
我试图在li上设置边框半径背景,但是我无法获得我想要的输出。
这是我迄今为止尝试过的 WORKING LINK 。我删除了边框半径,背景等,因为它没有正确显示。
HTML:
<ul>
<li>Text Character</li>
<li>Text Character</li>
<li>Text Character</li>
<li>Text Character</li>
<li>Text Character</li>
</ul>
CSS:
li{list-style-type:decimal;}
我想为上面的解决方案提供以下内容..
等待解决方案。
答案 0 :(得分:5)
这是一个小技巧:
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) "";
counter-increment: item;
background: blue;
color: white;
display: inline-block;
border-radius: 50%;
margin: 0 5px ;
padding: 0 5px;
}
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>