CODEWITHSUNDEEP
htmlcsslist
Dev B
Dev B

Reputation: 49

Add background colour to an Ordered List

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>

Upvotes: 4

Views: 2973

Answers (6)

Umid Kurbanov
Umid Kurbanov

Reputation: 184

Maybe this can help to set bullet background:

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

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>

Upvotes: 3

Francisco Santorelli
Francisco Santorelli

Reputation: 1338

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

Upvotes: 0

Faruk A Feres
Faruk A Feres

Reputation: 51

        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>

Upvotes: 0

Manu Bhardwaj
Manu Bhardwaj

Reputation: 1051

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

Upvotes: 9

brooksrelyt
brooksrelyt

Reputation: 4025

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>

Upvotes: 0

Related Questions