css - Comment ajuster le style de la balise devant ul ol

Question

J'ai rencontré une telle situation si vous utilisez le framework bootstrap pour le développement.
Excusez-moi : comment dois-je l'écrire ? S'il vous plaît, donnez-moi quelques idées. (Il est préférable d'utiliser bootstrap s'il peut être utilisé, mais peu importe s'il ne peut pas être utilisé)
Comme le montre l'image :

Answer 1

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

Answer 2

list-style-image peut être implémentée et la police d'icône peut être implémentée

Answer 3

Il est recommandé de ne pas utiliser le style de liste. Il est préférable de personnaliser le style, d'ajouter une couleur d'arrière-plan à la balise li, d'ajouter des bords arrondis, puis de personnaliser les couleurs des trois premiers

Effet final :

code 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>