¡Muchísimas gracias a los dos!
Al final, he tenido que hacer un pequeño híbrido:
Código HTML:
<h2>Calificaciones.</h2>
<ul class="calif">
<li><span><em>Ana</em>-</span>9</li>
<li><span><em>Maria</em>-</span>7</li>
<li><span><em>Ana Maria</em>-</span>8</li>
</ul>
Código:
.calif li span{color:transparent;background:url('bar.png') repeat-x;width:20em;display:inline-block}
.calif li span em{color:#000;background:#fff;font-style:normal}
Había intentado hacerlo con un
.calif li span span, pero hacía unas cosas extrañas... Creo que debía haber puesto algo como "hijo de" o hacerlo con clases. Pero de cualquier forma, creo que semánticamente el nombre sería la parte enfatizada de la lista, aunque no lo muestre en itálica, por lo que no representaría un error
Muchísimas gracias