¿Cuántas veces has tenido que poner una coletilla al lado de varios elementos en una web? Por ejemplo, poner la palabra «Error» antes de un mensaje de error. ¿No te encantaría que eso pudiera automatizarse?.

Pues con CSS3 puedes hacerlo. Con los pseudoelementos :before y :after. Estos te permiten añadir un contenido html antes (:before) o después (:after) de un elemento desde vuestra hoja de estilos. Para ello utilizaremos la propiedad «content». Vamos con un ejemplo, en el que añadiremos la palabra «Error» antes de un mensaje de error (vamos primero con lo más simple)

.error:before{
  content:"Error: ";
}

Furrula hasta en IE8 (7 no, no pidáis milagros), así que podéis ir trasteando con esto. Hay más posibilidades, claro, porque si sólo pudiéramos meter un textillo la cosa quedaría sosa. Lo primero, podemos dar estilos al contenido generado por estos elementos, como con cualquier otro elemento textual de la web:

.error:before{
  content:"Error: ";
  color:#FF0000;
  font-weight: bold;
}

O podemos incluir una imagen en lugar de un texto:

.error:before{
  content:url("carpetaimagen/imagenejemplo.png");
}

O crear un contenedor:

.error:before{
  content:"";
  display:block;
  background-color:#666;
  width:32px;
  height:32px;
  border:2px solid #ff0000;
}

Eso sí, hay una cosa que debemos tener en cuenta: a la hora de accesibilidad y del uso de lectores de pantalla, por ejemplo, estos textos/imágenes están generados por CSS, no son parte del DOM, no forman parte del contenido en si de la web, por lo que no serán interpretados por estos. Es decir, mejor no crear contenido relevante con esto, tanto por la accesibilidad como por el hecho de que los buscadores no lo indizarán.