Octopress/Lists: Difference between revisions
From charlesreid1
(Created page with "To style lists, you'll just need to add a little bit of CSS. The following CSS code is from http://codeitdown.com/ordered-list-css-styles/: <source lang="css"> ol { list-sty...") |
No edit summary |
||
| Line 36: | Line 36: | ||
counter-increment: li-counter; | counter-increment: li-counter; | ||
} | } | ||
</source> | |||
Finished product: | |||
[[Image:OctopressList.png|600px]] | |||
Revision as of 11:14, 14 April 2014
To style lists, you'll just need to add a little bit of CSS. The following CSS code is from http://codeitdown.com/ordered-list-css-styles/:
ol {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 4em;
padding: 0;
counter-reset: li-counter;
}
ol > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
}
ol > 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;
}
Finished product:
