Добавить цвет фона в упорядоченный список

Question

У меня есть упорядоченный список с номерами 1,2,3 и т. Д. Как добавить цвет фона к номерам 1,2,3, а также удалить точку после каждого из этих чисел?

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>

Answer 1

Вот более динамичный способ использования CSS-переменной:

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

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

Answer 2

Надеюсь, это поможет, но с css-counters и: перед селекторами вы могли бы делать то, что вы хотите.

вот скрипка:

div {
  counter-reset: list;
}

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

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

не стесняйтесь проверить счетчик css

Answer 3

        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*/
        }

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

Answer 4

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

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

Answer 5

Может быть, это поможет установить фон маркера:

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

Answer 6

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

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