Elementos AFTER y BEFORE en CSS

Una de las cosas potentes de CSS son los pseudo-elementos AFTER y BEFORE, que junto con la propiedad "Content" nos permite insertar cosas antes y despues de un elemento (X)HTML.

Como ejemplo veremos cómo poner en un blockquote esas "comillas" que se ven muchas veces, que "envuelven" el contenido.

Mirad este "blockquote" (after y before no funcionan en IE6 o inferior):

The ID element in Atom

A primera vista se puede pensar que está hecho insertando manualmente los tags <img>, pero no, está hecho con CSS:

blockquote
{
color: #222222;
}

blockquote:before {
color: #BEBEBE;
content: url("/images/contenidos/lecciones/css-blockquote1.gif") " " attr(cite);
}

blockquote div {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 12px;
}
blockquote:after
{
content: url("/images/contenidos/lecciones/css-blockquote2.gif");
}

En rojo están marcados los elementos AFTER y BEFORE. Está claro lo que hacen, el BEFORE inserta la imagen de las comillas antes del contenido y AFTER inserta las comillas despues.

Pero también vemos eso de attr(cite). ¿Qué es eso?
Pues eso nos "devuelve" el contenido del atríbuto "cite" que le pongamos al blockquote.

Por ejemplo:

Por fin ha salido Gnome 2.8. Entre las novedades cabe destacar las aplicaciones evolution2, vino y GNOME System Tools, applets mejorados, abundates mejoras en Epiphany y el centro de control

Ese "Barrapunto.com" que está despues de las comillas también es el valor de "cite" en el blockquote (<blockquote cite="Barrapunto.com">).

También conviene meter el contenido del Blockquote dentro de un <div> para que valide el XHTML. Aparte he puesto unos márgenes para que no se junte demasiado con las comillas :) .
Obviamente, podeis poner lo que querais.

Ah! Las imágenes son normales y corrientes: Imágen 1 e Imágen 2 :) .

Y por supuesto, todo XHTML Strict válido y CSS :)

Autor: Lechuga Hervida
http://toad.bitacoras.com/121-css_elementos_after_y_before.html

Usuarios que han visto este tema también han visto...

- Unidades y Medidas en CSS
- Celdas con puntas redondeadas utilizando CSS
- Cómo solucionar problemas en CSS
- FLOAT en CSS
- Crear un menú dinámico con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento