HTML <ol> Aufzählungszeichen Ändern

[dennis2002]

Hallo,
ich habe vor die Aufzählungszeichen eines HTML <ol> objekts zu ändern, um ein Regelwerk übersichtlicher zu gestalten.

Ich habe folgenden HTML Code:

<h2>§1 Themenfeld 1</h2>
<ol>
  <li>Themenfeld 1, Regel 1</li>
  <li>Themenfeld 1, Regel 2</li>
  <li>Themenfeld 1, Regel 3</li>
</ol>

<h2>§2 Themenfeld 2</h2>
<ol>
  <li>Themenfeld 2, Regel 1</li>
  <li>Themenfeld 2, Regel 2</li>
  <li>Themenfeld 2, Regel 3</li>
</ol>

Jetzt möchte ich das wie folgt ausgegeben haben:
§1 Themenfeld 1
Abs. (1) Themenfeld 1, Regel 1
Abs. (2) Themenfeld 1, Regel 2
Abs. (3) Themenfeld 1, Regel 3

§2 Themenfeld 2
Abs. (1) Themenfeld 2, Regel 1
Abs. (2) Themenfeld 2, Regel 2
Abs. (3) Themenfeld 2, Regel 3

Mir wurde gesagt, dass dies wohl nur mit JS lösbar sei, man konnte mir aber nicht sagen wie.

Sollte das in der Form nicht lösbar sein, würde ich mich auch mit (1) oder 1.1 / 1.2 || 2.1 / 2.1 zufireden geben.

Weiß jemand wie das umzusetzen ist? Ich habe bisher noch nie etwas mit JS programmiert oder ähnliches.

Danke schon mal im vorraus!


MfG
Dennis

[Christian Marquardt]

Mir wurde gesagt, dass dies wohl nur mit JS lösbar sei,

Dann Frage doch dort nach, wenn dir schon jemand das gesagt hat

https://www.w3schools.com/css/css_list.asp

[dennis2002]

Dann Frage doch dort nach, wenn dir schon jemand das gesagt hat

https://www.w3schools.com/css/css_list.asp

Die Person konnte mir leider nur sagen, dass es ohne JS anscheinend nicht geht, aber nicht wie ich es umsetzen kann.

Ich bin jetzt mal mit CSS so weit:
https://prntscr.com/we4abe

Wie bekomme ich es nun hin, dass die Zahl in den Klammern fortlaufend ist?

[Christian Marquardt]

So wohl nicht
The list-style property is a shorthand for the following properties:

• list-style-type
• list-style-position
• list-style-image

https://stackoverflow.com/questions/...xt-before-list

[dennis2002]

Okay, das hat mir ja schon ordentlich weiter geholfen
https://prntscr.com/we4qye

Jetzt noch eine letze Frage, und dann ist es so wie ich es will.
Wenn ich einen Zeilenumruch mache, bzw die Seite automatisch einen macht, weil der Inhalt des <li> nicht mehr in eine Zeile passt, wie kann ich den dann nach rechts einrücken, so dass der "prefix" im :before "frei steht" (im beispiel das "2. Zeile" unter dem "Themenfeld 2" steht?

[Christian Marquardt]

Bin offenbar der Einzige mit Internet und google

https://stackoverflow.com/questions/...-lists-via-css

[dennis2002]

Nein, du bist tatsächlich nicht der einzige mit Internet und google. Aber ich steh gerade leider total auf dem schlauch und finde halt nicht das, was ich suche :-/
sorry.


Aber jetzt geht alles wie es soll.
Danke!

[Christian Marquardt]

Das ist gut...