Html: <ol> list style background color
I would like to create this: http://www.kephost.com/images/2015/07/15/ol-color-picture.png
The simplest way would be if I could only use span for "list style items" (1. 2. 3. etc.):
<ol>
<span style="background-color:Aqua><li></span>..."text"...</li>
</ol>
But that does nothing with "list style items" (1. 2. 3., etc.). Is there a solution? I need exactly 5 selectable background colors for list style items: yellow, red, orange, green, aqua. thanks for the answer.
source to share
First you need to fix your invalid HTML. The only direct children allowed in <ol>
are <li>
. Wrapping <li>
in is <span>
not only invalid, you also violated the correctness rule, which basically states that when you insert elements, the outer element must be closed after the inner element.
But, in any case, there is no need to use additional markup here, it <li>
will just work fine as long as you put the correct css class in it:
.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>
If you have no experience with css counters at the moment, here's some more information on that:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
source to share
Try the following:
ul > li:before {
background-color: red;
margin-right: 5px;
padding: 0 5px;
content: counter(index, decimal);
counter-increment:index;
}
li:first-child {
counter-reset:index;
}
ul li {
list-style: none;
}
ul > li:nth-child(1):before {
background-color: yellow;
}
ul > li:nth-child(2):before {
background-color: blue;
}
ul > li:nth-child(3):before {
background-color: orange;
}
<ul>
<li>..text..</li>
<li>..text..</li>
<li>..text..</li>
</ul>
source to share
You can do this using pseudo elements and relative positioning
li:before {
content: '';
display: inline-block;
height: 20px;
width: 20px;
position: relative;
left: -24px;
top: 5px;
z-index: -1;
}
li.red:before {
background-color: red;
}
li.blue:before {
background-color: blue;
}
li.aqua:before {
background-color: aqua;
}
li.yellow:before {
background-color: yellow;
}
<ol>
<li class="red">First item</li>
<li class="blue">Second item</li>
<li class="aqua">Third item</li>
<li class="yellow">One more</li>
</ol>
source to share
With some CSS3 tricks, you can get an output that is close to what you are looking for, although I don't believe you can get an exact match.
Take a look at this fiddle: https://jsfiddle.net/j4Lrewkd/
You can see some of the tricks used:
list-style-type: none;
Removes numbers in an ordered list.
The pseudo-selector ::before
allows us to replace them with stylish elements.
Finally, the selector :nth-of-type()
allows us to style each element individually.
source to share
do it. here is my fiddle https://jsfiddle.net/d7tp553z/1/
<ol style="background-color: blue;">
<li style="background-color: white;">..."text"...</li>
</ol>
source to share