html - UL 列出带有样式的十进制数字的项目

Question

我需要创建一组列表项，我需要在其中使用边框半径和背景颜色设置列表项编号（小数）的样式。

这是我希望我的列表项看起来如何的快照。

我试图在 li 上放置一个边界半径、背景，但我无法获得我正在寻找的输出。

这是我迄今为止尝试过的工作链接。我删除了边框半径、背景等，因为它显示不正确。

的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;}

我想为上述提供以下解决方案..

• 它不应该是精灵/背景图像解决方案
• 我只是在寻找一种解决方案，我必须在我尝试过的列表项上使用边框半径和背景颜色，但无法按照我在参考图像中想要的方式工作。

等待解决方案。

Answer 1

这里有一个小技巧：

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>