Reemplazo de imágenes con CSS

Hola, tras leer varios artículos como este:
Revised Image Replacement

he estado haciendo pruebas y he llegado al siguiente código:

<code>[div id="prueba1" class="reemplazo_imagen"]
[a title="Texto del title" href="#"]
[span class="img" /]Texto de prueba
[/a]
[/div]</code>

pero si pongo esto no me funciona, sin embargo si cambio el cierre del span por esto:

<code>[div id="prueba1" class="reemplazo_imagen"]
[a title="Texto del title" href="#"]
[span class="img"][/span]Texto de prueba
[/a]
[/div]</code>

si me funciona.

¿Por qué sucede esto?

Un saludo y gracias