respuesta Revisado:jsFiddle Pure CSS Solution
Aquí es un método revisado que no utiliza el framework jQuery original de la OP, una petición que no fue cumplido en mi respuesta anterior. Ese método utilizaba jQuery existente para aplicar un contenedor de span para el elemento li
ya que la modificación directa de HTML no era posible.
Este nuevo método utiliza selectores CSS Pseudo :before
y :after
junto con CSS 2.1 counter
función que puede tener su lista de números estilizada de manera que no se necesita ningún envoltorio jQuery. De hecho, la revisión jsFiddle muestra los números usando la fuente Google @ font-face.
Uso de la función de contador de CSS es realizado por la que se declara un nombre de variable para utilizar en el elemento ul
, a continuación, incrementar el contador en el elemento :before
así como el uso como contenido real.
Ejemplo simple:jsFiddle CSS Counter
HTML:
<ul>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
</ul>
CSS:
ul{
list-style-type: none;
white-space: nowrap;
margin: 0;
padding: 0;
width: 210px;
height: 200px;
overflow: auto;
border: 3px solid royalblue;
/* Setup the counter. */
counter-reset: yourVariableName;
}
li:before{
/* Advance the number. */
counter-increment: yourVariableName;
/* Use the counter number as content. */
content: 'Item ' counter(yourVariableName) ': ';
color: royalBlue;
font-family: 'Impact';
}
Más sobre los contadores CSS HERE.
Mi respuesta fechada el original que utiliza marco existente en la pregunta de OP se muestra a continuación.
Miré a su pregunta cuidadosamente y luego miró a su página web.
Aquí está la solución que necesita: jsFiddle
En resumen, esto son las reglas CSS de reemplazo que hacen que funcione:
#secondary ol {
color:#F60;
margin-bottom:0;
margin-left: 0px; /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
list-style-position: inside; /* This will place the number on top and inside of the current color of li */
}
.notes{
color:#333;
width: 230px;
heigh: 50px;
display: inline-block;
vertical-align:text-top;
}
Resultado:
adicional: Este ejemplo variante enfatiza los números: jsFiddle
* ¿A qué * números quieres diseñar? – poepje
¡Disculpa, pero no estaba claro! Los números en la lista en el lado derecho. Editaré mi pregunta. Gracias. –