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 make cut off in CSS as shown in the attached image?

    How to not inherit CSS styles from parents? [duplicate]

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    How To Display first 50 characters Of Text [closed]

    How to create new lines with less space HTML/CSS

    css - how to hide href link nested inside a div?

    How to animate searchbox length from focusing on the textbox class CSS3?

    How can I change the color CSS property of an element using jQuery

    How do a Add scroll bar with fixed header

    How to Show the Related Content in another Div when an Image Clicked

    How to get this functionality to work

    How to link css files to work correctly with wamp server?

    How can I customise jquery loupe to have a circular lens?

    How do I center align the items in my menu?

    How can I use development tools to find css class of a plugin item

    How to float 3 divs with margin left & right 0px?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    CSS: how to make scrollbar appear outside div's border?

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    how to load external div into a master.html div from a number of submenu items

    HTML5/CSS: How to set the height of the page without considering the footer?

    How to write media queries for HD/Retina Display in Landscape position?

    How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

    How to work with Action Link when using CSS

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    how to make animated 404 gears?

    How to make `margin: top;` based on browser height?

    How to prevent ALT text showing on cursor hover over image?

    Meteor: How can I use Spacebars to apply different CSS elements?

    How to make div height 100% inside relative div?