How to gain hanging indent list with CSS Counters?


Tags: css,html-lists,css-content

Problem :

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



Solution :

@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.


    CSS Howto..

    Django. how to apply css style on boolean form field?

    How to cancel an upstream CSS declaration?

    How can I properly align two divs that fold atop each other when browser is shrinked?

    How to align multiple images in “li” on center

    How to create a border-bottom in CSS using a text character such as a dash, letter or number

    How do I center align the items in my menu?

    how to make this (table) using divs and css

    CSS: How to select only the first non-adjacent sibling after the element

    How to programmatically change the css background image?

    How do I make my django app load content as I scroll?

    How to resize dynamic images coming from database in a responsive bootstrap website

    How to add style to words (HTML/CSS)

    How do I specify IE 11 specific css file?

    How can I set the correct position of the text in CSS?

    how to place last div into right top corner of parent div? (css)

    How to add a custom font to Rails app?

    how to make RegEx to match CSS non greedy for a part of the match

    How to make rounded border in IE8 with CSS?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • css div and span display differently in browsers. How to unify?

    How to convert this CSS to SASS (arithmetics in selector)?

    How to “add details” to CSS (example Box shadow)

    How to change the background color of a line of user input in a textarea?

    How to make a moving dashed border with CSS?

    CSS: Hover in one DIV, how to display information from another DIV?

    how to prevent transformation of text inherited from a skewed parent

    How do I prevent text from flowing onto different sections of a page?

    How to apply CSS style in javascript for id generated at runtime

    How to animate a rotated DOM element with CSS

    CSS how to make special div shape