Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.
Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.
<ol> CSS styling
CSS counters are variables which are incremented using CSS rules. By reseting a counter on every ol tag and then incrementing it on every li tag, we replicate the list numbering. Then simply set the li's content as the counter value. To create your own ol CSS styles start with:
[css][/css] To use roman numerals change the content rule to <code>content: counter(ol-counter, upper-roman);</code> (for I,II,III,IV...). For letters, use lower-alpha (a,b,c,d...) or upper-alpha (A,B,C,D...). With the above code, no numbers are displayed in browsers that don't support counters, like Internet Explorer 7 and below. Add the line <code>list-style-type: decimal !ie;</code> for a normal unstyled list to be displayed in IE7-. <h2>Some <ol> styles</h2> I leave you some <ol> CSS styles I created using the technique explained above. Feel free to copy and modify them, or use the code as is. All the examples make use of the IE7- hack to show an unstyled list. Removing the IE7- hack future-proofs the code (in case the line is read by a new browser, breaking the hack), but then no numbers will be displayed by those browsers. <h3 style="color: #141412;">Simple</h3> <p style="color: #141412;">Simple. Just a number and a border:</p> <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http://codeitdown.com/wp-content/uploads/2014/02/simple-ol-css-style.png" alt="Simple ordered list style" width="600" height="auto" /></p> [css]ol.simple-list { list-style-type: none; list-style-type: decimal !ie; /*IE 7- hack*/ margin: 0; margin-left: 3em; padding: 0; counter-reset: li-counter; } ol.simple-list > li{ position: relative; margin-bottom: 20px; padding-left: 0.5em; min-height: 3em; border-left: 2px solid #CCCCCC; } ol.simple-list > li:before { position: absolute; top: 0; left: -1em; width: 0.8em; font-size: 3em; line-height: 1; font-weight: bold; text-align: right; color: #464646; content: counter(li-counter); counter-increment: li-counter; }[/css]Tilted
Tilted and partially covered numbers. Depending on your font, you may need to change the left propery of the pseudo-element to adjust the look.
Circles
Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look.
[css]ol.circles-list {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 4em;
padding: 0;
counter-reset: li-counter;
}
ol.circles-list > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
}
ol.circles-list > li:before {
position: absolute;
top: 0;
left: -1.33em;
width: 1.2em;
height: 1.2em;
font-size: 2.5em;
line-height: 1.2;
text-align: center;
color: #f5f5f5;
border: 3px solid #c5c5c5;
border-radius: 50%;
background-color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}[/css]
Boxes
Revisions
- September 2, 2015 @ 14:25:43 [Current Revision] by PeterLugg
- September 2, 2015 @ 14:25:43 by PeterLugg
- April 29, 2014 @ 14:23:55 by PeterLugg
- April 29, 2014 @ 14:22:29 by PeterLugg
- April 29, 2014 @ 14:22:00 by PeterLugg
Revision Differences
| April 29, 2014 @ 14:23:55 | Current Revision | ||
|---|---|---|---|
| Content | |||
| Unchanged: Original here: <a href="http:// codeitdown.com/ ordered-list- css-styles/" target="_blank" >http://codeitdown.com/ordered- list-css-styles/</a> | Unchanged: Original here: <a href="http:// codeitdown.com/ ordered-list- css-styles/" target="_blank" >http://codeitdown.com/ordered- list-css-styles/</a> | ||
| Unchanged: <p style="color: #141412;">Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.</p> | Unchanged: <p style="color: #141412;">Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.</p> | ||
| Unchanged: <p style="color: #141412;">Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.</p> | Unchanged: <p style="color: #141412;">Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.</p> | ||
| Unchanged: <h2 style="color: #141412;"><ol> CSS styling</h2> | Unchanged: <h2 style="color: #141412;"><ol> CSS styling</h2> | ||
| Unchanged: <p style="color: #141412;">CSS counters are variables which are incremented using CSS rules. By reseting a counter on every ol tag and then incrementing it on every li tag, we replicate the list numbering. Then simply set the li's content as the counter value. To create your own ol CSS styles start with:</p> | Unchanged: <p style="color: #141412;">CSS counters are variables which are incremented using CSS rules. By reseting a counter on every ol tag and then incrementing it on every li tag, we replicate the list numbering. Then simply set the li's content as the counter value. To create your own ol CSS styles start with:</p> | ||
| Unchanged: [css][/css] | Unchanged: [css][/css] | ||
| Unchanged: To use roman numerals change the content rule to <code>content: counter(ol-counter, upper-roman); </code> (for I,II,III,IV...). For letters, use lower-alpha (a,b,c,d...) or upper-alpha (A,B,C,D...). With the above code, no numbers are displayed in browsers that don't support counters, like Internet Explorer 7 and below. Add the line <code> list-style-type: decimal !ie;</code> for a normal unstyled list to be displayed in IE7-. <h2>Some &lt;ol&gt; styles</h2> I leave you some &lt;ol&gt; CSS styles I created using the technique explained above. Feel free to copy and modify them, or use the code as is. All the examples make use of the IE7- hack to show an unstyled list. Removing the IE7- hack future-proofs the code (in case the line is read by a new browser, breaking the hack), but then no numbers will be displayed by those browsers. <h3 style="color: #141412;"> Simple</h3> <p style="color: #141412;">Simple. Just a number and a border:</p> <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http://codeitdown.com/ wp-content/uploads/2014/02/ simple-ol-css-style.png" alt="Simple ordered list style" width="600" height="auto" /></p> | Unchanged: To use roman numerals change the content rule to <code>content: counter(ol-counter, upper-roman); </code> (for I,II,III,IV...). For letters, use lower-alpha (a,b,c,d...) or upper-alpha (A,B,C,D...). With the above code, no numbers are displayed in browsers that don't support counters, like Internet Explorer 7 and below. Add the line <code> list-style-type: decimal !ie;</code> for a normal unstyled list to be displayed in IE7-. <h2>Some &lt;ol&gt; styles</h2> I leave you some &lt;ol&gt; CSS styles I created using the technique explained above. Feel free to copy and modify them, or use the code as is. All the examples make use of the IE7- hack to show an unstyled list. Removing the IE7- hack future-proofs the code (in case the line is read by a new browser, breaking the hack), but then no numbers will be displayed by those browsers. <h3 style="color: #141412;"> Simple</h3> <p style="color: #141412;">Simple. Just a number and a border:</p> <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http://codeitdown.com/ wp-content/uploads/2014/02/ simple-ol-css-style.png" alt="Simple ordered list style" width="600" height="auto" /></p> | ||
| Unchanged: [css]ol.simple-list { | Unchanged: [css]ol.simple-list { | ||
| Unchanged: list-style-type: none; | Unchanged: list-style-type: none; | ||
| Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | ||
| Unchanged: margin: 0; | Unchanged: margin: 0; | ||
| Unchanged: margin-left: 3em; | Unchanged: margin-left: 3em; | ||
| Unchanged: padding: 0; | Unchanged: padding: 0; | ||
| Unchanged: counter-reset: li-counter; | Unchanged: counter-reset: li-counter; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.simple-list > li{ | Unchanged: ol.simple-list > li{ | ||
| Unchanged: position: relative; | Unchanged: position: relative; | ||
| Unchanged: margin-bottom: 20px; | Unchanged: margin-bottom: 20px; | ||
| Unchanged: padding-left: 0.5em; | Unchanged: padding-left: 0.5em; | ||
| Unchanged: min-height: 3em; | Unchanged: min-height: 3em; | ||
| Unchanged: border-left: 2px solid #CCCCCC; | Unchanged: border-left: 2px solid #CCCCCC; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.simple-list > li:before { | Unchanged: ol.simple-list > li:before { | ||
| Unchanged: position: absolute; | Unchanged: position: absolute; | ||
| Unchanged: top: 0; | Unchanged: top: 0; | ||
| Unchanged: left: -1em; | Unchanged: left: -1em; | ||
| Unchanged: width: 0.8em; | Unchanged: width: 0.8em; | ||
| Unchanged: font-size: 3em; | Unchanged: font-size: 3em; | ||
| Unchanged: line-height: 1; | Unchanged: line-height: 1; | ||
| Unchanged: font-weight: bold; | Unchanged: font-weight: bold; | ||
| Unchanged: text-align: right; | Unchanged: text-align: right; | ||
| Unchanged: color: #464646; | Unchanged: color: #464646; | ||
| Unchanged: content: counter(li-counter); | Unchanged: content: counter(li-counter); | ||
| Unchanged: counter-increment: li-counter; | Unchanged: counter-increment: li-counter; | ||
| Unchanged: }[/css] | Unchanged: }[/css] | ||
| Unchanged: <h3 style="color: #141412;">Tilted</h3> | Unchanged: <h3 style="color: #141412;">Tilted</h3> | ||
| Unchanged: <p style="color: #141412;">Tilted and partially covered numbers. Depending on your font, you may need to change the left propery of the pseudo-element to adjust the look.</p> | Unchanged: <p style="color: #141412;">Tilted and partially covered numbers. Depending on your font, you may need to change the left propery of the pseudo-element to adjust the look.</p> | ||
| Deleted: <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http:// | Added: <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http://wiki.pixelpress.com.au/ files/2014/04/ tilted-ol-css-style.png" alt="Tilted ordered list style" width="600" height="auto" /></p> | ||
| Unchanged: [css]ol.tilted-list { | Unchanged: [css]ol.tilted-list { | ||
| Unchanged: list-style-type: none; | Unchanged: list-style-type: none; | ||
| Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | ||
| Unchanged: margin: 0; | Unchanged: margin: 0; | ||
| Unchanged: margin-left: 3em; | Unchanged: margin-left: 3em; | ||
| Unchanged: padding: 0; | Unchanged: padding: 0; | ||
| Unchanged: counter-reset: li-counter; | Unchanged: counter-reset: li-counter; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.tilted-list > li{ | Unchanged: ol.tilted-list > li{ | ||
| Unchanged: position: relative; | Unchanged: position: relative; | ||
| Unchanged: margin-bottom: 20px; | Unchanged: margin-bottom: 20px; | ||
| Unchanged: padding: 1em; | Unchanged: padding: 1em; | ||
| Unchanged: border-left: 2px solid #CCCCCC; | Unchanged: border-left: 2px solid #CCCCCC; | ||
| Unchanged: background-color: #f5f5f5; | Unchanged: background-color: #f5f5f5; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.tilted-list > li:before { | Unchanged: ol.tilted-list > li:before { | ||
| Unchanged: position: absolute; | Unchanged: position: absolute; | ||
| Unchanged: top: 0; | Unchanged: top: 0; | ||
| Unchanged: left: -0.95em; | Unchanged: left: -0.95em; | ||
| Unchanged: width: 1em; | Unchanged: width: 1em; | ||
| Unchanged: font-size: 4em; | Unchanged: font-size: 4em; | ||
| Unchanged: line-height: 1; | Unchanged: line-height: 1; | ||
| Unchanged: font-weight: bold; | Unchanged: font-weight: bold; | ||
| Unchanged: text-align: right; | Unchanged: text-align: right; | ||
| Unchanged: color: #464646; | Unchanged: color: #464646; | ||
| Unchanged: transform: rotate(-25deg); | Unchanged: transform: rotate(-25deg); | ||
| Unchanged: -ms-transform: rotate(-25deg); | Unchanged: -ms-transform: rotate(-25deg); | ||
| Unchanged: -webkit-transform: rotate(-25deg); | Unchanged: -webkit-transform: rotate(-25deg); | ||
| Unchanged: z-index: -99; | Unchanged: z-index: -99; | ||
| Unchanged: overflow: hidden; | Unchanged: overflow: hidden; | ||
| Unchanged: content: counter(li-counter); | Unchanged: content: counter(li-counter); | ||
| Unchanged: counter-increment: li-counter; | Unchanged: counter-increment: li-counter; | ||
| Unchanged: }[/css] | Unchanged: }[/css] | ||
| Unchanged: <h3>Circles</h3> | Unchanged: <h3>Circles</h3> | ||
| Unchanged: Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look. | Unchanged: Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look. | ||
| Deleted: <img class="aligncenter size-full wp-image-998 nopin" src="http:// | Added: <img class="aligncenter size-full wp-image-998 nopin" src="http://wiki.pixelpress.com.au/ files/2014/04/circles-ol- css-style.png" alt="Circles ordered list style" width="600" height="auto" /> | ||
| Unchanged: [css]ol.circles-list { | Unchanged: [css]ol.circles-list { | ||
| Unchanged: list-style-type: none; | Unchanged: list-style-type: none; | ||
| Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | ||
| Unchanged: margin: 0; | Unchanged: margin: 0; | ||
| Unchanged: margin-left: 4em; | Unchanged: margin-left: 4em; | ||
| Unchanged: padding: 0; | Unchanged: padding: 0; | ||
| Unchanged: counter-reset: li-counter; | Unchanged: counter-reset: li-counter; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.circles-list > li{ | Unchanged: ol.circles-list > li{ | ||
| Unchanged: position: relative; | Unchanged: position: relative; | ||
| Unchanged: margin-bottom: 20px; | Unchanged: margin-bottom: 20px; | ||
| Unchanged: padding-left: 0.5em; | Unchanged: padding-left: 0.5em; | ||
| Unchanged: min-height: 3em; | Unchanged: min-height: 3em; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.circles-list > li:before { | Unchanged: ol.circles-list > li:before { | ||
| Unchanged: position: absolute; | Unchanged: position: absolute; | ||
| Unchanged: top: 0; | Unchanged: top: 0; | ||
| Unchanged: left: -1.33em; | Unchanged: left: -1.33em; | ||
| Unchanged: width: 1.2em; | Unchanged: width: 1.2em; | ||
| Unchanged: height: 1.2em; | Unchanged: height: 1.2em; | ||
| Unchanged: font-size: 2.5em; | Unchanged: font-size: 2.5em; | ||
| Unchanged: line-height: 1.2; | Unchanged: line-height: 1.2; | ||
| Unchanged: text-align: center; | Unchanged: text-align: center; | ||
| Unchanged: color: #f5f5f5; | Unchanged: color: #f5f5f5; | ||
| Unchanged: border: 3px solid #c5c5c5; | Unchanged: border: 3px solid #c5c5c5; | ||
| Unchanged: border-radius: 50%; | Unchanged: border-radius: 50%; | ||
| Unchanged: background-color: #464646; | Unchanged: background-color: #464646; | ||
| Unchanged: content: counter(li-counter); | Unchanged: content: counter(li-counter); | ||
| Unchanged: counter-increment: li-counter; | Unchanged: counter-increment: li-counter; | ||
| Unchanged: }[/css] | Unchanged: }[/css] | ||
| Unchanged: <h3 style="color: #141412;">Boxes</h3> | Unchanged: <h3 style="color: #141412;">Boxes</h3> | ||
| Deleted: <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http:// | Added: <p style="color: #141412;"><img class="aligncenter size-full wp-image-998 nopin" src="http://wiki.pixelpress.com.au/ files/2014/04/ boxes-ol-css-style.png" alt="Boxes ordered list style" width="600" height="auto" /></p> | ||
| Unchanged: [css]ol.boxes-list { | Unchanged: [css]ol.boxes-list { | ||
| Unchanged: list-style-type: none; | Unchanged: list-style-type: none; | ||
| Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | Unchanged: list-style-type: decimal !ie; /*IE 7- hack*/ | ||
| Unchanged: margin: 0; | Unchanged: margin: 0; | ||
| Unchanged: margin-left: 3em; | Unchanged: margin-left: 3em; | ||
| Unchanged: padding: 0; | Unchanged: padding: 0; | ||
| Unchanged: counter-reset: li-counter; | Unchanged: counter-reset: li-counter; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.boxes-list > li{ | Unchanged: ol.boxes-list > li{ | ||
| Unchanged: position: relative; | Unchanged: position: relative; | ||
| Unchanged: margin-bottom: 15px; | Unchanged: margin-bottom: 15px; | ||
| Unchanged: padding: 1em; | Unchanged: padding: 1em; | ||
| Unchanged: background-color: #d5d5d5; | Unchanged: background-color: #d5d5d5; | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: ol.boxes-list > li:before { | Unchanged: ol.boxes-list > li:before { | ||
| Unchanged: position: absolute; | Unchanged: position: absolute; | ||
| Unchanged: top: 0; | Unchanged: top: 0; | ||
| Unchanged: left: -1em; | Unchanged: left: -1em; | ||
| Unchanged: width: 0.94em; | Unchanged: width: 0.94em; | ||
| Unchanged: height: 0.94em; | Unchanged: height: 0.94em; | ||
| Unchanged: font-size: 3em; | Unchanged: font-size: 3em; | ||
| Unchanged: line-height: 0.94; | Unchanged: line-height: 0.94; | ||
| Unchanged: text-align: center; | Unchanged: text-align: center; | ||
| Unchanged: color: #f5f5f5; | Unchanged: color: #f5f5f5; | ||
| Unchanged: background-color: #464646; | Unchanged: background-color: #464646; | ||
| Unchanged: content: counter(li-counter); | Unchanged: content: counter(li-counter); | ||
| Unchanged: counter-increment: li-counter; | Unchanged: counter-increment: li-counter; | ||
| Unchanged: }[/css] | Unchanged: }[/css] | ||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.