Efecto rollover en un span

[kambiz_marta]

Buenas, soy bastante novatilla en css y quizás me estoy liando y quiero hacer lo que no se puede.
Me explico. Tengo una lista con las siguientes opciones:
- Quien
- Qué
- Como
Y quisiera que en el mouseover de cada opción apareciera más texto, es decir:
- Quien somos
- Qué ofrecemos
- Como encontrarnos

Lo he montado de la siguiente manera. Lo que me hace falta es que aparecezcan el texto adicional en el mouseover

Código HTML:

<div id=header>
             <ul id=navlist>
                <li><a href="#">QUIEN <span>somos</span</a></li>
                <li><a href="#">QUE; <span>ofrecemos</span></a><li>
                <li><a href="#">COMO <span>encontrarnos</span></a></li>
              </ul>
      </div>
 

Y en estilos lo siguiente:

Código CSS:

#navlist li a:hover {
    color: #FFF;                    background-color: #0099CC;
    visibility: visible;
}
 
#navlist li a span {
    font-family: "Bradley Hand ITC";
    font-size: 24px;
    visibility: hidden;
}
 

Me falta encontrar la manera de indicar el efecto mouseover del span.
Gracias por vuestra ayuda

[IsaBelM]

puedes usar el pseudo elemento css :after

[kambiz_marta]

Muchas gracias por el aporte.
Desconocía totalmente el after, before, .... Me lo he estado mirando.
De todas maneras, cómo el texto a visualizar es diferente a cada opción, no he encontrado la manera de diferenciarlos, a no ser que asigne a cada opción un id diferente, y luego los trate independientemente.

Y otra pregunta que me ha surgido de nuevo. Si quiero que este texto se mantenga visible al hacer click en una opción, el after no me sirve, verdad?

De nuevo muchísimas gracias.

[IsaBelM]

tendrás que crear un selector como este

#navlist li a:hover {
color: #FFF;
background-color: #0099CC;
font: 24px 'Bradley Hand ITC';
}

y añadir 3 selectores cada uno con su content correspondiente

respondiendo a tu segunda pregunta. no, para ello, en caso que quieras continuar con css, has de usar la pseudo clase :target. el problema es que no es admita por ie8-. no sé si la acepta la versión 9.

si tu intención es hacerlos visible con el evento onclick y que sea cross browser, tendrás que usar javascript

[kambiz_marta]

Muchas gracias