Pseudo-element en CSS (pseudo elementos)

  • Por
Vamos a conocer los pseudo elementos en CSS, hojas de estilo en cascada, que sirven, entre otras cosas, para definir estilos para la primera línea o letra de un texto.

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

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.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Dave

29/4/2005
Solo comentar unos detalles :

Los Pseudo-elements (Pseudo elementos, si se permite la traduccion xD) y las pseudo-class (pseudo clases) son "Case Sensitive" , es decir, que no es lo mismo escribirlas en minusculas que en mayusculas. Se interpretarán como 2 pseudo-elements y/o pseudo-class distintas, aun conteniendo los mismos valores.

2 o más pseudo-class se pueden aplicar a un objeto al mismo tiempo(tabla, capa, lista, parrafo, etc...) Existe un "orden de cascada" que atiende a varios criterios como por ejemplo el orden alfabetico de la declaracion de los pseudo-class, la prioridad entre las clases (aunque se consideran objetos normales), pero ocurre como con los operadores, que hay prioridad de ejecucion (primero aritmeticos,de comparacion y por ultimo logicos). En los pseudo-class y pseudo-elements ocurre igual, aunque desconozco el criterio en concreto.

Un saludo.

Sigfried

17/9/2005
Muy completo e interesante