05

11

Pseudo-elemento :before y :after

CSS3 nos ha traído nuevos pseudo-elementos, entre las que podemos encontrar :before y :after, que se encargan de crear un elemento al principio o al final del elemento en la que la usamos, permitiéndonos añadir texto o usarlo como otro elemento más.
Uno de los principales usos de esto es poder añadir por ejemplo símbolos de apertura y cierre en un texto (como interrogaciones, exclamaciones o comillas) o pequeños símbolos detrás de un link, entre otras cosas.

El diseño web
23
@PedroXitrus

En los ejemplos de arriba marco con el borde blanco el contenido de :before y :after, que como vemos puede ser cualquiera, y además se les puede añadir cualquier tipo de parámetro como márgenes, fondos, bordes y usarlas como queramos por lo general.
En el ejemplo de arriba he añadido estos pseudo-elementos a tres SPAN, y de forma general se hace así (sin entrar en las distintas formas en lo que lo podemos usar):

1. /* Añadir antes */
2. span:before{content:[Contenido]}
4. /* Añadir después */
5. span:after{content:[Contenido]}

Añadir texto

Como en el primer y segundo ejemplo añadimos texto (ya sea unas comillas o el símbolo del dólar y el nombre de la moneda) y lo hacemos simplemente añadiendo en el parámetro content dentro del pseudo-elemento el texto deseado entre comillas.

1. /* En este ejemplo abrimos y cerramos interrogaciones */
2. span:before{content:"¿"}
3. span:after{content:"?"}

Añadir imágenes

Para añadir texto simplemente debíamos de hacerlo añadiéndolo entre comillas lo que queramos poner delante y detrás, pero para añadir imágenes hay una pequeña variación, que consiste en añadir en el contenido URL() y dentro la ruta de la imagen.

1. /* Este ejemplo es como el tercero de arriba (el que añadimos el pájaro de Twitter) */
2. span:before{content:url(pajaro.png)}

Usar como un elemento independiente

Como he dicho antes podemos usar este pseudo-elemento para crear etiquetas a partir de un elemento existente (ya que estás no salen en el código, solo en el CSS) y con ellas podemos crear cualquier cosa, es solo cuestión de imaginar, espero poner algún ejemplo pronto de que podemos hacer con esto (además de lo básico).