2
votes

Ajouter une couleur d'arrière-plan à une liste ordonnée

J'ai une liste ordonnée avec les nombres 1, 2, 3 etc. Comment puis-je ajouter une couleur d'arrière-plan aux nombres 1, 2, 3 et également supprimer le point après chacun de ces nombres?

JSFIDDLE

<ol>
 	<li>Prep ingredients and SautÃ© if required.</li>
 	<li>Add ingredients to inner pot.</li>
 	<li>Close the lid. Set release to 0.</li>
</ol>

html css list

2 commentaires

Supprimer la période: stackoverflow.com/ questions / 5945161 /…

Contexte: stackoverflow.com/a/24429263/3684265

6 Réponses :

7
votes

<ol>
      <li class="bg-yellow">Yellow here</li>
      <li class="bg-red">Red here</li>
      <li class="bg-orange">Orange here</li>
      <li class="bg-green">Green here</li>
      <li class="bg-aqua">Aqua here</li>
    </ol>

.bg-yellow:before {
      background-color: yellow;
    }
    .bg-red:before {
      background-color: red;
    }
    .bg-green:before {
      background-color: green;
    }
    .bg-orange:before {
      background-color: orange;
    }
    .bg-aqua:before {
      background-color: aqua;
    }
    ol {
      counter-reset: myOrderedListItemsCounter;
    }
    ol li {
      list-style-type: none;
      position: relative;
    }
    ol li:before {
      counter-increment: myOrderedListItemsCounter;
      content: counter(myOrderedListItemsCounter)" ";
      margin-right: 0.5em;
    }

1 commentaires

Fonctionne comme un charme. Ma seule préoccupation est qu'il existe un moyen de rendre la couleur d'arrière-plan en forme de cercle plutôt qu'en carré?

0
votes

Peut-être que cela peut aider à définir l'arrière-plan de la puce:

li::before {
    content: "1"; color: red;
    display: inline-block; width: 1em;
    margin-left: -1em
}

0 commentaires

0
votes

<ol class="custom">
 	<li>Prep ingredients and SautÃ© if required.</li>
 	<li>Add ingredients to inner pot.</li>
 	<li>Close the lid. Set release to 0.</li>
</ol>

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
 
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
  color: red;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

0 commentaires

0
votes

        <ol>
          <li>Prep ingredients and SautÃ© if required.</li>
          <li>Add ingredients to inner pot.</li>
          <li>Close the lid. Set release to 0.</li>
        </ol>

        ol {
          counter-reset: item; /*Remove default style*/
          list-style-type: none;
          padding-left: 20px; /*space between the block and the number*/
        }

        li {
          display: block;
        }

        li:before {
          background-color: #F007; /*Background*/
          border-radius: 50%; /*make rounded*/
          margin-right: 4px; /*Space between text and number*/
          padding-left: 4px; /*fix the innerspace as needed*/
          content: counter(item) "  "; /*Count the lines*/
          counter-increment: item /*apply the counter*/
        }

0 commentaires

0
votes

J'espère que cela vous aidera, mais avec les compteurs css et: avant les sélecteurs, vous pouvez faire ce que vous voulez.

voici un violon:

<div>
 	<p>Prep ingredients and SautÃ© if required.</p>
 	<p>Add ingredients to inner pot.</p>
 	<p>Close the lid. Set release to 0.</p>
</div>

div {
  counter-reset: list;
}

p:before {
  counter-increment: list;
  content: counter(list);
  background-color: #000;
  color:white;
  margin-right: 1em;
  padding: 0 0.25em;
}

n'hésitez pas à vérifier le compteur css

0 commentaires

3
votes

Voici une méthode plus dynamique qui s'appuie sur la variable CSS:

<ol>
  <li >Red here</li>
  <li style="--c:yellow">Yellow here</li>
  <li style="--c:blue">Blue here</li>
  <li style="--c:orange">Orange here</li>
  <li style="--c:green">Green here</li>
</ol>

ol {
  counter-reset: count;
}

ol li {
  list-style-type: none;
  position: relative;
}

ol li:before {
  counter-increment: count;
  content: counter(count)" ";
  margin-right: 0.5em;
  display:inline-block;
  padding:0 5px;
  border-radius:50%;
  color:#fff;
  background:var(--c,red);
}

0 commentaires