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

    How to edit CSS styles in JavaScript?

    How to apply CSS styles to links that appear in table headers?

    How to create a circumference with CSS? [closed]

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    How to stop my css declaration from being overridden

    How can I make a two column layout's main div auto fit to browser width?

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to write regex to extract specific key format and value from CSS file?

    CSS how to deal with a lot of sprite without having to create a new css class

    How to property adjust table?

    How to view browser's calculated CSS specificity?

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to center a navigation bar properly? [closed]

    How to get CSS attributes assigned to a html table?

    How to get horizontal scrollbar to appear beneath content?

    How can I create this specific layout using html and css?

    How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

    How to center video source in circle shape using css, html

    How to place something in a triangle-shaped box?

    How to overwrite Twitter Bootstrap navbar-inner class

    How to remove css from DOM

    How to change css display none or block with button click

    Show background image out of the div [closed]

    How does one move html elements with scroll?

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    Adding css resource to a QuickTip in ExtJS not showing

    How To Slide One Image Out From Behind Another On Hover?

    How to override inline style dynamically?

    How can I completely centre the “feature” section of my layout (please see links)?

    How to select lowest level ul in nested ul in Javascript/ css