symbols

Summary

El descriptor symbols es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador. El descriptor symbols debe ser especificado cuando el valor del descriptor system es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor additive-symbols es usado para especificar los símbolos.

Los valores posibles para descriptor de símbolos incluyen:

  • Textos (<string>) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".
  • Imágenes - Usando la función url()
  • Identificadores
Related at-rule@counter-style
Valor inicialn/a (required)
Valor calculadocomo se especifica

Sintaxis

css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;

Valores

<symbol>

Representa u símbolo (<symbol>) usado dentro del sistema de conteo.

Sintaxis formal

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Ejemplo

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Resultado

Especificaciones

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también