CSS @counter-style rule

Definition and usage

CSS @counter-style The rule is used to define custom counter styles.

When the predefined styles do not meet the needs@counter-style The rule allows you to define your own counter style.

Example

Specify a custom counter style for the list:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

Test it personally

CSS syntax

@counter-style countername {
  En eller flera beskrivare
}

Attributvärde

Värde Beskrivning
countername

Definiera stora och små bokstäver känsliga namn för räknarstilen.

Observera: räknarnamnet får inte vara: none, decimal, disc, square, circle, disclosure-open eller disclosure-closed.
system

Definiera algoritmen som konverterar räknarens heltalsvärde till en sträng.

Om systemet är satt till: cyclic, numeric, alphabetic, symbolic eller fixed, behöver du symbols-identifieraren.

Om systemet är satt till: additive, behöver du additive-symbols-identifieraren.
symbols

Definiera symbolerna som används för märkning (kan vara sträng, bild eller anpassad identifierare).

Om systemidentifieraren är satt till cyclic, numeric, alphabetic, symbolic eller fixed är detta nödvändigt.

HTML UTF-8 symboler.
additive-symbols

Definiera additivsystemets additiva tupel.

Additiv räknarsystem (t.ex. romerska siffror) består av en rad vägtyngda symboler.

En lista över vägtyngda räknar symboler och deras icke-negativa heltalsvikt är ordnade i fallande vikt.

Om systemidentifieraren är satt till additive är detta nödvändigt.
negative Definiera prefix- eller suffixtecknet som ska läggas till om värdet är negativt.
prefix Definiera prefixtecknet som ska läggas till före märkningen.
suffix Definiera suffixtecknet som ska läggas till efter märkningen.
range

Definiera räknarstilens värdeomfattning.

Återgår till det reservstilen om räknarvärdet går utanför intervallet.
pad

Använd denna identifierare om märket måste ha en minimilängd.

Till exempel, om du vill att räknaren ska börja med 01 och sedan 02, 03, 04 osv., använd pad-identifieraren.

För räknare som är större än det specificerade pad-värdet, byggs märket normalt.
speak-as

Definiera hur talgeneratorn ska läsa ut räknarstilen.

Till exempel, för en ordnad lista, läsa ut som siffror eller bokstäver; för en icke-ordnad lista, läsa ut som ljudprompt.
fallback

Definiera namnet på räknaren som återgår om systemet inte kan bygga märket eller om det går utanför det specificerade intervallet.

Om en reservräknare eller ett reservsystem inte kan representera räknarvärdet, återgår till talsystemet.

Webbläsarstöd

Talen i tabellen anger den första webbläsare som fullständigt stöder denna @-regel.

Chrome Edge Firefox Safari Opera
91 91 33 17 77