Hacer un texto que cambie cuando pasas el mouse con CSS y HTML

Este tutorial sirve para poder hacer que un texto cambie cuando se le pasa el mouse por encima sin necesidad de HTML5, CSS3 o Javascript. Con muy poco de HTML y CSS se puede hacer algo increible.
Yo por ejemplo hice una web que solo tiene 1 palabra que cambia, pero ustede pueden modificarlo como gusten.
El codigo CSS es el siguiente

Código HTML :

p:before {
content:"Sociedad";
padding:0 auto;
font-famiy:Helvetica;
text-align:Center;
font-size:60px;
color:#261D1D;
}

p:hover:before {
content:"Suciedad";
padding:0 auto;
font-famiy:Helvetica;
text-align:Center;
font-size:60px;
}

Vamos a explicar como funciona.
Lo primero que le digo es que yo lo voy a ser un <p> ustedes lo pueden cambiar (yo hice el <p> por que es 1 sola palabra) SI O SI Tiene que haber un :before. El content es la palabra que va a aparece y despues va a cambiar. Despues es exactamente lo mismo, pero se le agrega un hover y se le cambia el content.

Mi codigo HTML es el siguiente, use 1 sola palabra para hacerlo minimalista.

Código HTML :

<p class="sociedad"></p>

Es muy simple y se pueden hacer con frases, y casi con lo que quieran, tan solo investigen el content en CSS

DEMO

el tutorial y el demo están incompletos. No declaras un doctype, y lo que muestras se puede hacer tranquilamente con html5, CSS3, asi como también Xhtml y css2, solo que no lo especificas.

como tuto podrías implementarlo en un botón por ejemplo, y mejorar la redacción. Un poco mas completo y podría pasar a portada.

saludos