You are viewing an old revision of this post, from April 29, 2014 @ 14:23:55. See below for differences between this version and the current revision.

Ordered List CSS Styles

Original here: http://codeitdown.com/ordered-list-css-styles/

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

Tilted ordered list style

[css]ol.tilted-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.tilted-list > li{ position: relative; margin-bottom: 20px; padding: 1em; border-left: 2px solid #CCCCCC; background-color: #f5f5f5; } ol.tilted-list > li:before { position: absolute; top: 0; left: -0.95em; width: 1em; font-size: 4em; line-height: 1; font-weight: bold; text-align: right; color: #464646; transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); z-index: -99; overflow: hidden; content: counter(li-counter); counter-increment: li-counter; }[/css]

Circles

Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look. Circles ordered list style [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

Boxes ordered list style

[css]ol.boxes-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.boxes-list > li{ position: relative; margin-bottom: 15px; padding: 1em; background-color: #d5d5d5; } ol.boxes-list > li:before { position: absolute; top: 0; left: -1em; width: 0.94em; height: 0.94em; font-size: 3em; line-height: 0.94; text-align: center; color: #f5f5f5; background-color: #464646; content: counter(li-counter); counter-increment: li-counter; }[/css]

Revisions

Revision Differences

April 29, 2014 @ 14:23:55Current 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;">&lt;ol&gt; CSS styling</h2>Unchanged: <h2 style="color: #141412;">&lt;ol&gt; 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 &lt;code&gt;content: counter(ol-counter, upper-roman); &lt;/code&gt; (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 &lt;code&gt; list-style-type: decimal !ie;&lt;/code&gt; for a normal unstyled list to be displayed in IE7-. &lt;h2&gt;Some &amp;lt;ol&amp;gt; styles&lt;/h2&gt; I leave you some &amp;lt;ol&amp;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. &lt;h3 style="color: #141412;"&gt; Simple&lt;/h3&gt; &lt;p style="color: #141412;"&gt;Simple. Just a number and a border:&lt;/p&gt; &lt;p style="color: #141412;"&gt;&lt;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" /&gt;&lt;/p&gt;Unchanged: To use roman numerals change the content rule to &lt;code&gt;content: counter(ol-counter, upper-roman); &lt;/code&gt; (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 &lt;code&gt; list-style-type: decimal !ie;&lt;/code&gt; for a normal unstyled list to be displayed in IE7-. &lt;h2&gt;Some &amp;lt;ol&amp;gt; styles&lt;/h2&gt; I leave you some &amp;lt;ol&amp;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. &lt;h3 style="color: #141412;"&gt; Simple&lt;/h3&gt; &lt;p style="color: #141412;"&gt;Simple. Just a number and a border:&lt;/p&gt; &lt;p style="color: #141412;"&gt;&lt;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" /&gt;&lt;/p&gt;
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 &gt; li{Unchanged: ol.simple-list &gt; 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 &gt; li:before {Unchanged: ol.simple-list &gt; 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://codeitdown.com/ wp-content/uploads/2014/02/ tilted-ol-css-style.png" alt="Tilted ordered list style" width="600" height="auto" /></p> 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 &gt; li{Unchanged: ol.tilted-list &gt; 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 &gt; li:before {Unchanged: ol.tilted-list &gt; 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://codeitdown.com/ wp-content/uploads/2014/02/ circles-ol-css-style.png" alt="Circles ordered list style" width="600" height="auto" /> 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 &gt; li{Unchanged: ol.circles-list &gt; 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 &gt; li:before {Unchanged: ol.circles-list &gt; 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://codeitdown.com/ wp-content/uploads/2014/02/ boxes-ol-css-style.png" alt="Boxes ordered list style" width="600" height="auto" /></p> 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 &gt; li{Unchanged: ol.boxes-list &gt; 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 &gt; li:before {Unchanged: ol.boxes-list &gt; 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.

Tags: , , ,

No comments yet.

Leave a Reply