css - ul ol前邊的標記如何調整樣式呢

Question

遇到了這樣的情況；如果用的是bootstrap框架開發的話。
請問：該怎麼寫呢，求各位老哥提供點思路。 （能用的話最好把bootstrap用上，用不上也行）
如圖：

#

Answer 1

https://codepen.io/HaoyCn/pen...

Answer 2

list-style-image 可以實現 圖示字體可以實現

Answer 3

建議還是不要用list-style,最好自訂樣式,給li標籤添加背景色,添加圓角邊,再給前三個自訂顏色

最終效果:

css代碼

   <style>
    li {
        list-style: none;
        width: 20px;
        text-align: center;
        margin: 10px 0;
        border-radius: 4px;
        color: #fff;
        background-color: #ccc;
    }
    .one{
        background-color: red;
    }
    .two{
        background-color: green;
    }
    .three{
        background-color: orange;
    }
    </style>

HTML

    <ul>
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>