ejemplos - Contadores de pseudo-elementos CSS: ¿puede incrementar una letra del alfabeto “a”, “b”, “c”, etc. en lugar de un número?

css selector

Question

Como se define aquí:

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Puede usar un código como el siguiente para incrementar números en pseudo elementos.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

¿Hay alguna forma de usar el mismo código para incrementar letras como "a", "b", "c", etc.?

¡Gracias!

Answer 1

Sí, el segundo argumento de counter() define el tipo de contador usado, como para el list-style-type de list-style-type de un ul u ol regular; por ejemplo:

content: counter(chapter, lower-alpha);

ul {
  counter-reset: listStyle;
}
ul li {
  margin-left: 1em;
  counter-increment: listStyle;
}
ul li::before {
  margin-right: 1em;
  content: counter(listStyle, lower-alpha);
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Demostración de JS Fiddle .

Otros incluyen: decimal , decimal-leading-zero decimal decimal-leading-zero , lower-roman upper-roman , lower-greek lower-latin upper-latin , armenian , georgian , lower-alpha upper-alpha .

Como parece que hubo una actualización de la lista de estilos anterior, elegí agregar un fragmento de código que le permita al usuario elegir entre las opciones disponibles (actualmente), junto con un área de "salida", para mostrar cómo para usar ese estilo con CSS generado-contenido:

let select = document.querySelector(''select''),
  output = document.querySelector(''#currentCounter''),
  changeEvent = new Event(''change'');

select.addEventListener(''change'', function() {
  document.body.style.setProperty(''--listStyleType'', this.value);
  output.textContent = this.value;
});

select.dispatchEvent(changeEvent);

body {
  --listStyleType: decimal;
}

ul {
  counter-reset: listStyle;
  columns: 2;
  margin-top: 0.5em;
  list-style-type: none;
}

ul li {
  counter-increment: listStyle;
}

ul li::before {
  content: counter(listStyle, var(--listStyleType));
  display: inline-block;
  margin-right: 0.5em;
  width: 1.5em;
  height: 1.5em;
  line-height: 2em;
  text-align: center;
}

code {
  display: block;
  white-space: pre-wrap;
  width: 80%;
  box-sizing: border-box;
  margin: 1em auto;
  padding: 0.5em;
  box-shadow: 0 0 0 3px limegreen;
}

code::after {
  content: ''/A'';
}

#currentCounter {
  color: #f90;
}

<label for="counterChoice">Please select a CSS counter:</label>
<select id="counterChoice">
  <option value="arabic-indic">arabic-indic</option>
  <option value="armenian">armenian</option>
  <option value="bengali">bengali</option>
  <option value="cambodian">cambodian</option>
  <option value="circle">circle</option>
  <option value="cjk-decimal">cjk-decimal</option>
  <option value="cjk-earthly-branch">cjk-earthly-branch</option>
  <option value="cjk-heavenly-stem">cjk-heavenly-stem</option>
  <option value="decimal">decimal</option>
  <option value="decimal-leading-zero">decimal-leading-zero</option>
  <option value="devanagari">devanagari</option>
  <option value="disc">disc</option>
  <option value="disclosure-closed">disclosure-closed</option>
  <option value="disclosure-open">disclosure-open</option>
  <option value="ethiopic-numeric">ethiopic-numeric</option>
  <option value="georgian">georgian</option>
  <option value="gujarati">gujarati</option>
  <option value="gurmukhi">gurmukhi</option>
  <option value="hebrew">hebrew</option>
  <option value="hiragana">hiragana</option>
  <option value="hiragana-iroha">hiragana-iroha</option>
  <option value="japanese-formal">japanese-formal</option>
  <option value="japanese-informal">japanese-informal</option>
  <option value="kannada">kannada</option>
  <option value="katakana">katakana</option>
  <option value="katakana-iroha">katakana-iroha</option>
  <option value="khmer">khmer</option>
  <option value="korean-hangul-formal">korean-hangul-formal</option>
  <option value="korean-hanja-formal">korean-hanja-formal</option>
  <option value="korean-hanja-informal">korean-hanja-informal</option>
  <option value="lao">lao</option>
  <option value="lower-alpha">lower-alpha</option>
  <option value="lower-alpha">lower-alpha</option>
  <option value="lower-armenian">lower-armenian</option>
  <option value="lower-greek">lower-greek</option>
  <option value="lower-latin">lower-latin</option>
  <option value="lower-roman">lower-roman</option>
  <option value="malayalam">malayalam</option>
  <option value="mongolian">mongolian</option>
  <option value="myanmar">myanmar</option>
  <option value="oriya">oriya</option>
  <option value="persian">persian</option>
  <option value="simp-chinese-formal">simp-chinese-formal</option>
  <option value="simp-chinese-informal">simp-chinese-informal</option>
  <option value="square">square</option>
  <option value="tamil">tamil</option>
  <option value="telugu">telugu</option>
  <option value="thai">thai</option>
  <option value="tibetan">tibetan</option>
  <option value="trad-chinese-formal">trad-chinese-formal</option>
  <option value="trad-chinese-informal">trad-chinese-informal</option>
  <option value="upper-alpha">upper-alpha</option>
  <option value="upper-armenian">upper-armenian</option>
  <option value="upper-latin">upper-latin</option>
  <option value="upper-roman">upper-roman</option>
</select>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>

<code>
  li::before {
    content: counter(&lt;counterName&gt;, <span id="currentCounter"></span>)
  }
</code>

El actualmente disponible (a partir de 2017-02-27):

• árabe-indic
• armenio
• bengalí
• camboyano
• circulo
• cjk-decimal
• cjk-rama terrenal
• cjk-celestial-tallo
• decimal
• decimal-líder-cero
• devanagari
• Dto
• revelación cerrada
• revelación abierta
• etiope-numérico
• georgiano
• gujarati
• gurmukhi
• hebreo
• hiragana
• hiragana-iroha
• japonés-formal
• japonés-informal
• canada
• katakana
• Katakana-Iroha
• Khmer
• coreano-hangul-formal
• coreano-hanja-formal
• coreano-hanja-informal
• lao
• alfa inferior
• alfa inferior
• armenio inferior
• bajo griego
• bajo latín
• bajo romano
• malayalam
• mongol
• myanmar
• oriya
• persa
• simp-chino-formal
• simp-chino-informal
• cuadrado
• tamil
• telugu
• tailandés
• tibetano
• chino tradicional formal
• chino tradicional informal
• alfa superior
• armenio superior
• latín superior
• alto romano

Referencias:

• list-style-type .
• " Contenido generado, numeración automática y listas " del W3 (ahora desactualizado).
• " Estilos de contador CSS, nivel 3 ", de W3.