<h1>Ordered List Item Style Prefix</h1>
<!-- content to be placed inside <body>…</body> -->
<ol id="standard">
<li>Standard</li>
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol class="prefixed">
<li>Prefixed</li>
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol class="prefixed steps">
<li>Stepped</li>
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol class="prefixed steps nodot">
<li>Stepped, no period</li>
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol class="prefixed styled">
<li>Styled, no period</li>
<li>Apples</li>
<li>Oranges</li>
</ol>
/**
* Ordered List Item Style Prefix
* prefix ordered list item numbers with a static string using CSS
* Dabblet (by @EricRasch): http://dabblet.com/gist/2919680
* jsFiddle (by @EricRasch): http://jsfiddle.net/NUJJk/
* SCSS Mixin (by @JimmyNotJim): http://jsfiddle.net/KY9ua/
* forked from: http://jsfiddle.net/BoltClock/9VdB3/
* StackOverflow Q&A: http://stackoverflow.com/a/5568259/1428800
*/
ol.prefixed {
counter-reset: item;
list-style-type: none;
*list-style-type: decimal; /*Conditional hack for ie7*/
}
ol.prefixed li:before {
content: 'Q' counter(item, decimal) '. ';
counter-increment: item;
}
/* The <ol> needs to have its counter-reset redefined for each version you want to create. */
ol.steps { counter-reset: item; }
ol.steps li:before { content: 'Step ' counter(item, decimal) '. '; }
ol.nodot { counter-reset: item; }
ol.nodot li:before { content: 'Step ' counter(item, decimal) ' '; }
ol.styled { counter-reset: item; }
ol.styled li {
background: rgba(78,68,50,.10);
border-radius: 4px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 2;
margin-bottom: 10px;
width: 200px;
}
ol.styled li:before {
content: '' counter(item, decimal) '';
background: #4e443c;
border-radius: 4px;
color: #f7f7ef;
font-size: 15px;
margin: 0 5px 0 8px;
padding: 4px 7px;
}
/* STOP HERE. The rest of this CSS is for style purposes only and is not needed for the demo to function.
(but be sure to substitue out the LESS variables/mixins I used above)
---------------------------------------------------------------------------------------------------- */
/* =VARIABLES (LESS @variables do not get compiled into the final CSS file)
---------------------------------------------------------------------------------------------------- */
@base-background: #fffaef; /*cream*/
@base-text: #4f4351; /*purple/grey*/
@color-subtitles: #9a8864; /*mud*/
@color-highlight: #e9e59b; /*lime*/
@color-button: #f2f2f0; /*grey*/
@color-button-text: darken(@color-button, 50%); /*grey*/
@color-button-border: darken(@color-button, 10%); /*grey*/
@color-button-on: #ffa640; /*orange*/
/* =MIXINS
---------------------------------------------------------------------------------------------------- */
// Border Radius
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
/* =BASE STYLES
---------------------------------------------------------------------------------------------------- */
body {
background: #f7f7ef;
color: #4e443c;
margin: 20px;
padding: 20px;
min-height: 100%;
}
body {
background: @base-background;
color: @base-text;
font-family: Arial, Helvetica, sans-serif;
margin: 5em 2em;
}
h1, h2 {
color: @base-text;
letter-spacing: -.05em;
text-align: center;
text-shadow: 0 1px 2px fade(lighten(@base-background, 50%), 50%);
}
h1 {
background: fade(@base-text, 10%);
border-bottom: 1px solid fade(@base-background, 90%);
outline: 1px solid fade(@base-text, 20%);
margin: 0 auto;
padding: .5em;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
h3, h4, h5 { color: @base-text; }
small, hr {
display: block;
margin: 1em 0;
.opacity(50);
}
ol {
border-right: 1px solid rgba(78,68,50,.05);
float: left;
list-style-type: decimal;
margin: 1em;
margin-left: 0;
padding: 1em;
padding-right: 2em;
}
External CSS
This Pen doesn't use any external CSS resources.