Überschriften in HTML automatisch nummerierenHTML

HTML-Programmierer
Guest
 Überschriften in HTML automatisch nummerieren

Post by Guest »

Ich möchte, dass Überschriften in meinem HTML automatisch nummeriert werden. Ich bin allerdings auch gezwungen, zu verwenden. Dazu habe ich zum Testen einen HTML-Code erstellt:

Code: Select all





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


Ich möchte so etwas erhalten wie:

Code: Select all

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
aber ich bekomme das auf Firefox:

Image

und ich bekomme das auf Chromium:

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

beides ist nicht das gewünschte Ergebnis.
Können Sie mir helfen zu verstehen, was los ist?

Gibt es welche Wie kann ich auf beiden Plattformen debuggen?

Wie kann ich auf beiden Plattformen das gewünschte Ergebnis erzielen?
Grüße

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post