Playing with Lists

by Andrew Holloway

HTML

<ol class="number">
  <li class="padded">test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
</ol>

<ul class="plus">
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
</ul>

<ul class="minus">
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
  <li>test 3</li>
</ul>

CSS

ul,ol {
  
  list-style-position: outside;
  
  margin-left: 2rem;
  padding: 0;
}

ol li::marker {
  content: counter(list-item) ".";
}

ul.plus {
  list-style-type: "+";
}

ul.minus {
  list-style-type: '—';
}

ul > li, ol > li {
  margin-left: 0;
  padding: 0;
}

li::marker {
  white-space: normal;
}