Pseudo-element en CSS (pseudo elementos)

Los pseudo-element (pseudo-elementos, si preferimos 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. Es decir, con CSS podemos definir el estilo de una etiqueta, pero con los pseudoelementos no nos limitamos a definir el estilo para todo el contendido de esa etiqueta, sino que indicamos el estilo para una parte restringida de esa etiqueta.

Existen diversos tipos de pseudo elementos, con distintas aplicaciones, para definir el estilo de diversas cosas, como veremos a continuación con ejemplos.

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: ".

Si queremos ver un ejemplo completo de uso de los pseudo elementos after y before podemos leer el siguiente artículo del taller de CSS, en el que mostramos una técnica para conseguir las esquinas redondeadas en CSS 2.