CODEWITHSUNDEEP
csshtml-listscss-content
Denis Giffeler
Denis Giffeler

Reputation: 1509

How to gain hanging indent list with CSS Counters?

I'm trying to build a 3 level ordered list with CSS counters.

ol {
counter-reset: paragraph;
list-style-type: none;
margin-bottom: 1em;
font-weight: bold;
}

ol > li::before {
counter-increment: paragraph;
content: "§" counter(paragraph) " ";
}
...

Is there a way to accurately indent the 1st and 2nd level?

I know there is a way using something like

text-indent: -10px; padding-left: 10px;

but the size of the counter changes with font-size or increasing numbers.

http://codepen.io/ekadagami/pen/ezZEbo

Upvotes: 1

Views: 1923

Answers (2)

NeonDevil
NeonDevil

Reputation: 106

This isn't my original code, but it's worth repeating for those who want an alternate solution for infinite depth.

I'm late to the party, but following solution works best for me:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Links:

Upvotes: 0

Denis Giffeler
Denis Giffeler

Reputation: 1509

@Paulie_D got it right by positioning the pseudo-element:

ol > li {
  position: relative;
}

ol > li::before {
    counter-increment: paragraph;
    content: "§" counter(paragraph) " ";
    position: absolute;
    left: -1.5em;
}

http://codepen.io/Paulie-D/pen/oLxGeW

Thank you.

Upvotes: 3

Related Questions