A :before és az :after álelem kijelölők felhasználásának lehetőségeit kiterjeszti a számlálók használata.
A counter-reset tulajdonság segítségével nullázható egy számláló:
kijelölő
{
counter-reset:
:
szamlalo_neve;
}
A counter-increment tulajdonság segítségével léptethető:
kijelölő
{
counter-increment:
:
szamlalo_neve;
}
A :before álelem kijelölő felhasználásával a számozott elem előtt, az :after álelem kijelölő felhasználásával pedig a számozott elem után tudjuk megjeleníteni sorszámát.
elem:before
{
content:
:
counter(szamlalo_neve) ". "
}
Példa:
Forráskód
<style>
body {counter-reset:szamlalo;}
p:before {
counter-increment:szamlalo;
content:"Bekezdés " counter(szamlalo) ". ";
}
</style>
….
<body>
<p>A bekezdés szövege... </p>
<p>A bekezdés szövege... </p>
<p>A bekezdés szövege... </p>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_beszurt_szamlalo_01.html