Numerando los comentarios con estilo

La numeración con estilo que publican en 456 Berea Street es interesante y muy simple de aplicar. Utiliza el pseudo-elemento :before y dos propiedades de las listas que usualmente no incluimos: counter-reset y counter-increment que nos permiten generar contenido de modo automático es decir, en este caso, numerar una lista.

Vamos al ejemplo que es una variante del mostrado en CSS Tricks.

El HTML:

<dl class="numeros">
  <dt>Morbi porta facilisis leo, ut pretium elit gravida sed.</dt>
    <dd>consectetur felis</dd>
  <dt>Pellentesque malesuada sapien quis quam tincidunt.</dt>
    <dd>fringilla sed risus</dd>
  <dt>Donec scelerisque nisi ultricies felis varius luctus.</dt>
    <dd>lectus ipsum</dd>
</dl>

Y el CSS:

<style>
  .numeros { /* el contenedor es la etiqueta DL */
    background-color: #000;
    border: 1px solid #444;
    counter-reset: nombre_contador; /* ponemos el contador a cero */
    margin: 0 auto;
    padding: 20px 20px 0;
    width: 500px;
  }
  .numeros dt {
    font-size: 18px;
    position: relative;
  }
  .numeros dt:before { /* este es el número */
    content: counter(nombre_contador, decimal);
    counter-increment: nombre_contador;
    left: 0;
    position: absolute;
    top: -8px;
    /* los detalles de la fuente son a gusto de cada uno */
    background-color: #444;
    border-radius: 4px;
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    padding: 0 10px;
  }
  .numeros dd {
    color: #FFF;
    margin: 0 0 30px;
  }
  .numeros dt, .numeros dd {
    padding-left: 55px;
}
</style>

Morbi porta facilisis leo, ut pretium elit gravida sed.

consectetur felis

Pellentesque malesuada sapien quis quam tincidunt.

fringilla sed risus

Donec scelerisque nisi ultricies felis varius luctus.

lectus ipsum

¿Y para qué podría servir?

Justamente, elijo este demo porque usa las etiquetas DL DT y DD en lugar de las tradicionales etiquetas de lista (UL LI) ya que los comentarios de Blogger están armados con estas etiquetas así que, si quiseramos numerar los comentarios, podríamos utilizar este mismo esquema ya que todas estas propiedades funcionan en cualquier navegador, incluyendo IE8.

Si esa parte de nuestra plantilla tiene el código original y no hemos cambaido demasiadas cosas, bastaría agregar estas reglas antes de </b:skin>:

#comments-block {
  counter-reset: contadorcomentarios;
}
#comments-block dt {
  position: relative;
}
#comments-block dt:before {
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  position: absolute;
  right: 0;
  top: 0;
   /* las propiedades de la fuente del número */
  color: #888;
  font-family: Arial;
  font-size: 30px;
}

Y si hemos "manoseado" mucho esa parte de la plantilla, no hay problema, podemos hacer lo mismo e ir viendo qué otras propiedades debemos agregar o cambiar; en mi caso, funcionó perfectamente sin otro agregado y ahora, está aplicado a los comentarios del blog así que la numeración no depende ya de un script sino que es puro CSS.