Skip to content

Instantly share code, notes, and snippets.

@ericrasch

ericrasch/dabblet.css

Created June 12, 2012 19:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ericrasch/2919680 to your computer and use it in GitHub Desktop.
Save ericrasch/2919680 to your computer and use it in GitHub Desktop.
Download ZIP
Ordered List Item Style Prefix
Raw
dabblet.css
/**
* 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
*/
body {
background: #f7f7ef;
color: #4e443c;
margin: 20px;
padding: 20px;
min-height: 100%;
}
ol {
list-style-type: decimal;
margin-bottom: 20px;
}
ol.prefixed {
border-top: 1px solid rgba(78,68,50,.05);
counter-reset: item;
list-style-type: none;
*list-style-type: decimal; /*Conditional hack for ie7*/
margin-left: -20px;
padding-top: 20px;
}
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;
}
​
Raw
dabblet.html
<!-- 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>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment