PseudoElementos en CSS

Un pseudoelemento de CSS es una regla o selector que permite definir formato a una parte concreta de un nodo HTML.Como cualquier otro componente de HTML y CSS su lista no está cerrada del todo, y con el tiempo van apareciendo nuevos pseudoelementos. Vamos a ver aquí los más interesantes.

A nivel formal, los pseudoelementos se diferencian de las pseudoclases porque en su definición llevan dos puntos dobles (::).Aunque esto es obligatorio desde la última definición de HTML, si los escribimos solamente con dos puntos simples (:) el navegador reconocerá el formato y lo aplicará correctamente.

Selectores de Contenido para la primera letra de un elemento ::first-letter

Con este selector accedemos directamente a la primera letra de un elemento. Combinado un la pseudoclase :first-child podemos seleccionar la primera letra del primer elemento:

	<p class="capitulares">Érase una vez, en un remoto país...</p>
	<p class="capitulares">Hace mucho, mucho tiempo...</p>
	<p class="capitulares">Y colorín colorado...</p>
		
Y el CSS
	.capitulares::first-letter {
		font-family: script;
		font-size: 48px;
		font-weight: bold;
		color: lime;
	}
	.capitulares:first-child::first-letter {
		font-size: 52px;
		background-color: lightgrey;
		border: 1px solid;
		color: darkgreen;
		padding: 5px 15px;
	}	
	

Veremos:

Selector para primera línea de texto ::first-line

Este elemento selecciona directamente la primera línea de texto de cada bloque, y permite definir un formato específico para esa línea. Si el reflujo de texto en el documento cambia la longitud de la línea (por visualización en dispositivos diferentes, por ejemplo), el formato se aplica a las palabras que consituyen la primera línea en ese dispositivo. En el siguiente código:

	.linea::first-line {
		font-size: 28px;
		font-weight: bold;
	}
	

Vemos:

Selectores antes y después de un elemento ::before y ::after

Con estos selectores podemos añadir contenido a un elemento mediante CSS, de forma que cambiemos el propio contenido del documento porporcionado por el HTML. Son selectores que generan polémica porque rompen la diferencia entre contenido y presentación que persigue el estádar de HTML y CSS. Pero que usados de forma apropiada, pueden aportar más valor al documento.

La forma de especificar qué contenido mostrar antes o después del elemento es usando la propiedad content de CSS. Esta propiedad sólo la reconoce el navegador cuando va definida dentro de un pseudoelemento ::before o ::after

	.rodeado::before, .rodeado::after {
		content: "*";
		font-size: 50px;
		color: red;
		margin: 0 1em;		
	}
	

Vemos:

Otro ejemplo de estos pseudoelementos sirven para generar diferentes tipos de elementos de lista, fuera de las viñetas habituales de las etiquetas <li>

	.listado li::before {
		content: ".-";
		margin-right: 0.5em;
		font-weight: bold;
	}
	

Vemos:

Otro uso de estos pseudoelementos es para marcar o identificar todas las etiquetas de un tipo con un elemento de texto propio. Además, combinado con la pseudoclase :hover podemos cambiar ese contenido cuando pasamos el ratón sobre el elemento. Por ejemplo con los enlaces:

	.enlaces a::before {
		content: "@";
		margin-right: 0.5em;
		margin-left: 0.3em;
		display: inline-block;
		width: .6em;
		font-size: 24px;
		position: relative;
		top: ipx;
	}
	.enlaces a:hover::before {
		content: "-";
	}
	

Podemos ver:

Inserción de atributos del elemento a través de pseudoelementos

Una de las tareas que podemos hacer con estos pseudoelementos y la propiedad content es obtener un dato del elemento de alguno de sus atributos y mostrarlo en el documento. Esto se hace usando como valor de la propiedad content la expresión attr(), y colocando entre paréntesis el nombre del atributo a mostrar.

Un ejemplo de uso puede ser al configurar la hoja de estilos para imprimir un documento. Mediante esta propiedad podemos hacer que los enlaces muestren su atributo href en el papel, y así saber a dónde llevan, puesto que no estamos viendo el documento en un navegador para pulsar sobre ellos.

Sería algo así, estos enlaces en pantalla:

Con el siguiente formato

		.enlaces-imprimir a::after {
			content: "=> dirección: "attr(href);
			color: aqua;
			margin-left: 1rem;
			font-style: italic;
		}
	

Pueden aparecer así:

Esta propiedad permite mostrar el valor de cualquier atributo HTML, no sólo el que acabamos de mostrar. Otras aplicaciones prácticas pueden ser para mostrar en pantalla el atributo title de una imagen, haciendo que este aparezca como pie de foto, o la posibilidad de mostrar cualquier información adicional de un elemento almacenada en un atributo de tipo data-. Las posibilidades de trabajo con estos pseudoelementos son muy amplias.

Otra opción que puede resultar interesante, es el uso del valor counter para la propiedad content, permitiendo generar listados con contadores automáticos de elementos. Podemos ver un ejemplo de uso en la siguiente página de W3Schools: Ejemplo de contadores con CSS

Otro uso interesante de esta propiedad es la de añadir iconos o caracteres especiales al documento usando las entidades CSS. Podemos ver un ejemplo en la página de entidades CSS de W3Schools.

PseudoElementos con uso restringido

Además de los elementos listados anteriormente, existen algunos pseudoelementos más disponibles, cuyo uso no está aconsejado en sitios en producción. Bien porque están todavía en fase de desarrollo, bien porque no han sido estandarizados, o bien porque los navegadores no los implementan todavía. Son estos:

• ::selectionPermite trabajar con el texto seleccionado en el documento
• ::backdropRelacionado con el orden de apilamiento (o capas) de los elementos
• ::placeholderReferido al atributo placeholder de un elemento input o textarea
• ::markerSelecciona los elementos de viñeta de listas de etiquetas li o de cualquier elemento con display: item-list.
• ::spelling-errorElemento mal deletreado
• ::grammar-errorElemento mal escrito