Add a "." after li numbering

Question

I have an ordered list that I have incrementing by 1. What I am trying to do is get it to increment by 1 with a dot after the 1:

1.
2.
3.
4

Within my list I have it working like,

So that Is correct I just want the number at the beginning to also have a . at the end.

My current code looks something like this:

ol { 
  counter-reset: item ;
}

li { 
  display: block;
}

li:before {
  content: counters(item, ".") " "; 
  counter-increment: item;
  float: left;
}

<ol>
  <li> 
    <ol>

    </ol>
  </li>
</ol>

So it should end up looking like:

1.
 1.1
 1.2
 1.3
2.
 2.1
 2.2
 2.3
3.
 3.1
 3.2
 3.3

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters — CBroe, Jan 19 '16 at 08:37
For the people marking as duplicate or putting links to guides. This guy has a very specific problem. Read first, then comment or answer. — Gust van de Wal, Jan 19 '16 at 08:43

Gust van de Wal · Accepted Answer · 2020-10-09T13:04:38.083

6

Here's a Fiddle of what you want.

All I did was change the CSS so that the ordered-list-items have a period at the end, unless they're deeper than 1 level. Fairly simple.

ol li::before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

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

No need for extra, unnecessary classes.

Hope this helps

edited Oct 09 '20 at 13:04

answered Jan 19 '16 at 08:52

Gust van de Wal

5,211
1
24
48

Alex · Answer 2 · 2016-01-19T08:51:17.907

2

If you want the numbers to have a dot at the end change your css to

li:before {
    content: counters(item, ".") ".\00a0 ";
}

\00a0 adds space (" " doesn't worked for me).

Edit: Regarding the discussion: give an extra class to the first level and use above CSS (see Codepen).

http://codepen.io/anon/pen/MKOOjv

edited Jan 19 '16 at 08:51

answered Jan 19 '16 at 08:36

Alex

789
1
12
29

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

There is already a topic solving this issue

Achieving sub numbering on ol items html

Credits to Joey

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

<ol>
    <li> 
        Tome 1
        <ol>
          <li>Chapter 1</li>
          <li>Chapter 2</li>
        </ol>
    </li>
</ol>

edited May 23 '17 at 12:23

Community

1
1

answered Jan 19 '16 at 08:38

Anwar

4,162
4
41
62

@zertops yes I know you can do it like that. But if you look there it then becomes 1.1. which I do not want. I just want it to have a 1. followed by 1.1 then 1.2 etc – factordog Jan 19 '16 at 08:40
@factordog You should have mentioned that in your question. – JJJ Jan 19 '16 at 08:41
I did. I explained how it looked and where I wanted to add a . – factordog Jan 19 '16 at 08:42
@factordog No, you didn't. "I just want the number at the beginning to also have a . at the end" is totally ambiguous. – JJJ Jan 19 '16 at 08:43
Apologies then. But that was what I was trying to get at – factordog Jan 19 '16 at 08:44
Misunderstood it, too. It's also not good looking because it's inconsequent design (speaking as TeX fan). I'll adjust my answer. – Alex Jan 19 '16 at 08:46

score 0 · Answer 4 · answered Jan 19 '16 at 08:39

ol { 
  counter-reset: item ;
}

li { 
  display: block;
}

li:before {
  content: counters(item, ".") "."; 
  counter-increment: item;
  float: left;
  margin-right:10px;
}

<ol>
  <li>Test1
    <ol>
      <li>Test1.1</li>
      <li>Test1.2</li>
      <li>Test1.3</li>
    </ol>
  </li>
  <li>Test2</li>
  <li>Test3</li>
</ol>

I've amended the snippet above. You simply needed to add a "." in the second part of the "content" attribute. I also stuck a margin in there to make it obvious.

Add a "." after li numbering

4 Answers4