Add background colour to an Ordered List

Question

I have an ordered list with numbers 1,2,3 etc. How can I add background colour to the numbers 1,2,3 and also remove the dot after each of these numbers?

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>

Remove Period: https://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period — imvain2, Jan 11 '19 at 19:21

score 9 · Accepted Answer · edited Jan 11 '19 at 19:21

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

Works like a charm. My only concern is that is there any way to make the background colour in a circle shape rather than a square ? — Dev B, Jan 11 '19 at 19:27

score 3 · Answer 2 · answered Jan 11 '19 at 19:50

Here is a more dynamic way that rely on CSS variable:

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>

score 0 · Answer 3 · edited Jan 11 '19 at 20:27

0

Maybe this can help to set bullet background:

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

edited Jan 11 '19 at 20:27

brooksrelyt

3,925
5
31
54

answered Jan 11 '19 at 19:20

Umid Kurbanov

174
1
5

score 0 · Answer 4 · answered Jan 11 '19 at 19:20

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>

score 0 · Answer 5 · answered Jan 11 '19 at 19:31

        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>

score 0 · Answer 6 · answered Jan 11 '19 at 19:33

Hope this helps, but with css-counters and :before selectors, you could do what you want.

here's a fiddle:

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>

feel free to check css counter

Add background colour to an Ordered List

6 Answers6