Counter – licznik css

Counter – licznik css

wartość ustawiana poprzez: counter-reset i counter-increment

wyświetlanie poprzez funkcję counter(), counters()

 

css:


body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

html:


<h1>Asia Summits</h1>
<h2>Mount Everest - 8848 m n.p.m.</h2>
<h2>K2 - 8611 m n.p.m.</h2>
<h2>Kanczendżanga - 8598 m n.p.m.</h2>

<h1>Europe Summits</h1>
<h2>Mont Blanc - 4810 m n.p.m.</h2>
<h2>Mont Blanc de Courmayeur - 4748 m n.p.m.</h2>
<h2>Dufourspitze - 4634 m n.p.m.</h2>

efekt:

Section 1. Asia Summits

1.1 Mount Everest – 8848 m n.p.m.
1.2 K2 – 8611 m n.p.m.
1.3 Kanczendżanga – 8598 m n.p.m.

Section 2. Europe Summits

2.1 Mont Blanc – 4810 m n.p.m.
2.2 Mont Blanc de Courmayeur – 4748 m n.p.m.
2.3 Dufourspitze – 4634 m n.p.m.

 

lub:


dl { counter-reset: dtcount 2 }
dt:before { content: counter(dtcount)". "; counter-increment: dtcount 4; }

gdzie:

  • liczba 2 – wartość początkowa licznika
  • liczba 4 – krok licznika

 

efekt:

6. Coffee
Black hot drink
10. Milk
White cold drink

#css#font