En este capítulo abordaremos los pseudo-elementos del CSS3 y sus cambios respecto a CSS2.1.
En la versión 2.1 contábamos con 4 pseudo-elementos:
- :first-line. Selecciona la primera línea.
- :first-letter.Selecciona la primera letra.
- :before. Nos posiciona al inicio del contenido de un elemento.
- :after. Nos posiciona al final del contenido de un elemento.
La siguiente imagen muestra dónde apuntaría el selector en cada uno de los casos:

CSS3 conserva estos pseudo-elementos aunque cambia su sintaxis. Para usarlos escribiremos "::" en lugar de ":".
Código :
p::first-letter{
color:red;
}
p::first-line{
color:blue;
}
h1::after{
content:".";
}
h1::before{
content:"Ejemplo de ";
}
<div id="ejemplo">
<h1>pseudo-elementos</h1>
<p>Esto es un ejemplo usando pseudo elementos en CSS3 donde pasamos coloreamos de rojo la primera letra con first-letter, coloreamos de azul la primera línea con first-line, e incluimos en el título el texto "Ejemplo de" y "." con before y after respectivamente.
</div>
CSS3 añade un nuevo pseudo-elemento:
- ::selection. Selection referencia al texto seleccionado por el usuario.
Si usamos
Código :
p::selection{ background-color:blue; }
Cuando seleccionemos el texto del párrafo, la selección tendrá color de fondo azul en vez del típico gris.
En el próximo capítulo veremos a fondo las pseudo-clases.
Información adicional
® Cristalab 2011
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.