Adding parenthesis to ordered lists

Adding parenthesis to ordered lists.markdown

Adding parenthesis to ordered lists ('-' * 35) Just a quick and dirty demo for customizing ordered lists.

A Pen by Sean Dempsey on CodePen.

License.

index.html

<div class="container">
	<h1>Adding parenthesis to ordered lists</h1>
<ol>
  <li>Parent ol selector gets: <pre>ol {
  counter-reset: list;
}</pre></li>
  <li>List items get:<pre>ol li {
  list-style-type: none;
  position: relative;
}<pre></li>
  <li>Finally use a :before pseudo selector on the list items to customize and position the output:<pre>ol li:before {
  counter-increment: list;
  content: counter(list,decimal) ") ";
  position: absolute;
  left: -20px;
}</pre></li>
</ol>	
</div>

style.css

.container {
	@include container;
}

ol {
	counter-reset: list;

	// These are the important styles
	li {
		list-style-type: none;
		position: relative;

		&:before {
			counter-increment: list;
			content: counter(list, decimal) ") ";
			position: absolute;
			left: -20px;
		}
	}
}