Pseudo-element en CSS

Los pseudo-element (pseudo-elementos, si se me permite la traducción al castellano) sirven para aplicar estilos a partes más específicas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta párrafo, con los pseudo-elementos podemos definir el estilo para la primera letra del párrafo y para la primera línea.

Pseudo-element first-letter

Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para niños, es hacer más grande la primera letra de una página y decorarla de alguna manera. Con CSS podemos aplicar estilos específicos y hacer, por ejemplo, que esa primera letra sea más grande y tenga un color distinto del resto del párrafo.

Se utiliza de esta manera:

P:first-letter {
font-size: 200%;
color: #993333; font-weight: bold;
}

Así estamos asignando un tamaño de letra 200% más grande del propio del párrafo. También estamos cambiando el color de esa primera letra.

De entre todas las propiedades de estilos, sólo algunas se pueden aplicar a los pseudo-elementos first-letter. Son las siguientes, según la especificación del W3C: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (sólo si 'float' está asignado a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' y 'clear'.

Se puede ver un ejemplo de aplicación de un estilo con first-letter.

Pseudo-element first-line

Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera línea del texto. Es posible que hayamos visto alguna revista o periódico que utilice este estilo para remarcar las primeras líneas del párrafo. Un ejemplo de su uso sería el siguiente:

P:first-line {
   text-decoration: underline;
   font-weight: bold;
}

Las propiedades de estilos que se pueden aplicar al pseudo-element first-line son las siguientes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

Se puede ver un ejemplo de aplicación de un estilo con first-line.

Uso de clases con los pseudo-elementos

En determinadas ocasiones podemos necesitar crear una clase (class) de CSS a la que asignar los pseudo-elementos, de modo que estos no se apliquen a todas las etiquetas de la página. Por ejemplo, podemos desear que solamente se modifique el estilo de la primera línea del texto en algunos párrafos y no en todos los de la página.

Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si además deseamos definir un pseudo-elemento, deberíamos indicarlo a continuación, con esta sintaxis:

P.nombreclase:first-line {
    font-weight: bold;
}

Pseudo-elementos en CSS2

Aparte de first-line y first-letter, en las especificaciones de CSS 2 existen otros pseudo elementos que voy a nombrar para conocimiento de los lectores, aunque profundizaré en su uso. Se tratan de before y after y sirven para insertar "contenidos generados" antes y después del elemento al que asignemos estos pseudo-element.

Un ejemplo de ello es:

P.nota:before {
    content: "Nota: "
}

Así se ha definido una clase de párrafo llamada "note" en la que se indica que antes de la propia nota se debe incluir el texto indicado, osea, "Nota: ".

Atención a la compatibilidad con CSS2, que, por lo menos para estos elementos, no está soportada en versiones 6 de Internet Explorer. Firefox, en cambio, sí que es compatible con estas características de CSS2.