Автоматическая нумерация заголовков в html ⇐ Html

[Anonymous]

Я хотел бы, чтобы в моем HTML-коде заголовки имели автоматическую нумерацию. Однако я также вынужден использовать . Для этого я создал HTML для тестирования:

Код: Выделить всё

body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
counter-reset: section-h1 section-h2 section-h3 section-h4;
}
h1 {
counter-increment: section-h1;
counter-reset: section-h2;
}
h1::before {
content: counter(section-h1) ". ";
}
h2 {
counter-increment: section-h2;
counter-reset: section-h3;
}
h2::before {
content: counter(section-h1) "." counter(section-h2) ". ";
}
h3{
counter-increment: section-h3;
counter-reset: section-h4;
}
h3::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) ". ";
}
h4 {
counter-increment: section-h4;
}
h4::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) "." counter(section-h4) ". ";
}




first level 1
second level 1
third level 1
third level 2



second level 2
third level 1
third level 2



third level 3
third level 4
third level 5



third level 6
second level 3
third level 1



third level 2
second level 4
third level 1

Я хотел бы получить что-то вроде:

Код: Выделить всё

1. first level 1
1.1. second level 1
1.1.1. third level 1
1.1.2. third level 2
---------------------
1.2. second level 2
1.2.1. third level 1
1.2.2. third level 2
---------------------
1.2.3. third level 3
1.2.4. third level 4
1.2.5. third level 5
---------------------
1.2.6. third level 6
1.3. second level 3
1.3.1. third level 1
---------------------
1.3.2. third level 2
1.4. second level 4
1.4.1. third level 1

но я получаю это в Firefox:



и я получаю это в Chromium:

[img]https://i. sstatic.net/82qbFcOT.png[/img]

Ни то, ни другое не является желаемым результатом.
Можете ли вы помочь мне понять, что происходит?

Есть ли какие-либо способ отладки на двух платформах?

Как добиться желаемого результата на обеих платформах?
С уважением

Подробнее здесь: https://stackoverflow.com/questions/793 ... gs-in-html