How to change the Display of numbered lists to decimal 1, 1.1, 1.2 instead of 1 a b

#1

As said in the title how can I get that display of a list?
1
1.1
1.2
2
2.1

#2

Ask Dr. StackOverflow: html - Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css? - Stack Overflow

<style>
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
</style>

Only thing left to do is tweak the indent which is not working well with this so far.

#3

With better indent…

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

…the only bug here ist that a # whithout content produces an ughly overlay.

1 Like
#4

Working better for me, especially when containing width might be variable:

<style>
ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: relative;
    margin-right: 0;
    right: 0.5em; /* space between number and text */
}
</style>
1 Like