Buenas tardes compañeros, esta vez traigo un reto que creo será un poco difícil.
Tengo una lista con palabras de distintos tamaños, digamos algo así:
Código HTML:
<h2>Calificaciones.</h2>
<ul>
<li>Ana<span class="bar">-</span>9</li>
<li>Maria<span class="bar">-</span>7</li>
<li>Ana Maria<span class="bar">-</span>8</li>
</ul>
La idea es mediante CSS, hacer que el span tenga color transparente y un fondo que muestre un patrón. Quiero que comience al terminar el nombre, pero terminen todos a la misma altura, para que los números queden alineados:
Calificaciones.
· Ana ---------------- 9
· Maria -------------- 7
· Ana Maria --------- 8
¿Alguien sabría como podría hacer este efecto?