Pseudo-elementos en CSS 3

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&iacute;nea con first-line, e incluimos en el título el texto "Ejemplo de" y "." con before y after respectivamente. 
</div>

Ver ejemplo

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.

Ver ejemplo

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.