Hanging Indents on OL and UL

by Matthew Schenker

HTML

<p>
  Below are lists that need to hang!
</p>
<p>
  First a numbered ol:
</p>
<ol>
  <li>This is the first item, and as you can see it is quite long, in fact so very long that it needs a new line so there is what we call a hanging indent! Isn't that something!</li>
  <li>This one too! It is the second item, and as you can see it is quite long, in fact so very long that it needs a new line so there is what we call a hanging indent! Isn't that something!</li>
</ol>
<p>
  Then a bulleted ul:
</p>
<ul>
  <li>This is the first item, and as you can see it is quite long, in fact so very long that it needs a new line so there is what we call a hanging indent! Isn't that something!</li>
  <li>This one too! It is the second item, and as you can see it is quite long, in fact so very long that it needs a new line so there is what we call a hanging indent! Isn't that something!</li>
</ul>

CSS

ol,
ul {
  margin-left: 12px;
}

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

ol li,
ul li {
  list-style-position: inside;
  text-indent: -1em;
}