Menu
If you want to number items in order, you can use the <ol> (ordered list) tag. But it is kind of hard to style those list numbers in CSS. There is an easier way to create a number styled list of item using the :before pseudo element along with counter properties.
By setting the color, you can specify what color the bullet should take. Since the color and font-size applies for the text also, you need to include the text within span tags to separate it from the bullets so you can specify a separate style for the text.
To change some of the text in the HTML document to another color use the FONT COLOR Tag. To change the color of the font to red add the following attribute to the code to the <FONT COLOR=" "> tag. #ff0000 is the color code for red.
The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on IE7:
<html>
<head>
<style>
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
color: red;
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Not sure if this works but i think it should:
<li style='color: red;'><span style='color:black;'>test</span></li>
edit
If you cannot edit the html then I'm afraid it's not possible. If you could add javascript to the HTML (once in the head) then you could do it like this:
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
You will need the jQuery library for this.
Then in your CSS just set up a red and a black class with color:red/black declarations.
Here's a solution that also wraps the text for each list item left-aligned below the first line (and not below the list number):
HTML
<ol class="GreenNumbers">
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
</ol>
CSS
.GreenNumbers {
list-style-type: none;
}
.GreenNumbers ol {
margin-left: 2em;
}
.GreenNumbers li {
counter-increment: count-me;
}
.GreenNumbers li::before {
content: counter(count-me) ". ";
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -1.3em;
top: .05em;
color: #008000;
font-weight: bold;
}
The introduction of the ::marker pseudo-element makes changing the color (and other styling) of numbers in an ordered list far simpler.
Example:
ol li::marker {
color: red;
}
Modern browsers already support use of ::marker: https://caniuse.com/css-marker-pseudo
We're at a point where older solutions (workarounds) are no longer necessary and most sites can be comfortable using ::marker today.
Keep in mind that not all properties are available on the marker tag. See the MDN docs for more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With