Estilo de número de lista personalizado | Programar Plus

¿Qué tal un truco CSS clásico? Esto ya no es tan complicado, ya que CSS ha counter-increment y counter-reset y tal que sea perfecto para esto. Solo quería asegurarme de que supiera cómo funciona y de tener algunos ejemplos fáciles de copiar listos.

Digamos que todo lo que quieres hacer es diseñar los malditos números:

Consulte el estilo de lista personalizada de lápiz 2 de Chris Coyier (@chriscoyier) en CodePen.

Ah, y oye, si te preocupa alinear los números, puedes aplicar el contador con ::marker y deja que la magia de list-style hacer una alineación automática, o aquí hay una idea con subcuadrícula.

A continuación, se muestra un ejemplo de las páginas de desafíos de CodePen:

Consulte los contadores de listas personalizados de Pen de Chris Coyier (@chriscoyier) en CodePen.

Los fotogramas clave hicieron un bolígrafo el otro día que usaba estilos bastante geniales. Aquí hay una reducción:

Consulte el estilo de lista personalizada de lápiz 3 de Chris Coyier (@chriscoyier) en CodePen.

Los sitios de recetas son excelentes lugares para buscar estilos de listas personalizados, ya que las listas de pasos son una característica importante. En el sitio de Mat Marquis, tiene algunos divertidos. Arranqué su CSS y lo moví aquí:

Vea los contadores Pen Wilto de Chris Coyier (@chriscoyier) en CodePen.

Asegúrese de revisar el pequeño y divertido cambio de consulta de medios. El sitio de comida de Lea Verou, por supuesto, también tiene numeración basada en contadores.

Aquí hay una demostración interesante de Jonathan Snook que tiene un aspecto de “línea de tiempo” y utiliza contadores personalizados para etiquetar cada sección:

Consulte el CSS de la línea de tiempo del lápiz con contadores de Jonathan Snook (@snookca) en CodePen.

Más información

  • Contar con contadores CSS y cuadrícula CSS
  • Numeración con estilo
  • Momentos divertidos con contadores CSS
  • Marcadores de lista de estilos en CSS
  • contador-incremento y contador-reset en el Almanaque, y el teórico :: marcador
  • Numeración automática con contadores CSS
  • Listas ordenadas con símbolos Unicode