Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS

Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS

Según la ayuda de Mozilla para desorrallores un pseudeselector es una instrucción que acompaña un selector para añadir un aspecto decorativo a un elemento.

Ejemplos de pseudeselectores son ::first-letter y ::first-line.

En esta entrada trataremos ::before y ::after.

Un pseudoselector no es exactamente que una pseudoclase. Mientras que el pseudoselector atiende al aspecto estético, la pseudoclase atiende al estado del elemento. Un ejemplo de pseudoclase es :hover.

Compatibilidad con navegadores

Su historia viene de largo. Podría parecer algo muy moderno pero no. En CSS 2.1 ya se usaban.

/*Versión css 2.1*/

:before{}
:after{}

/*Versión css 3*/

::before{}
::after{}

La diferencia está en si poner 2 veces 2 puntos o 1 vez.

Actualmente el W3C insiste en que pongamos 2 veces 2 puntos para diferenciar los pseudoselectores de las pseudoclases.

Hagámosle caso… pero vaya, que si pones sólo dos puntos una vez los navegadores ofrecen compatibilidad para las 2 versiones.

Si prevés que vas a tener usuarios con una versión inferior a explorer 8 entonces mejor que uses simplemente : una vez.

Ejemplo de uso

::before y ::after se suelen usar con la instrucción content. También pueden ir acompañadas de otras instrucciones como margin o padding.

Es importante que tengas en cuenta que el elemento añadido será un elemento en línea.

Recuerda que los elementos en línea no tienen width, height, ni margin-top ni margin-bottom.

En función de lo que quieras hacer deberás combinarlo con display:block; o display:inline-block.

Veamos un ejemplo.

<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de uso de ::before y ::after</title>
	<meta charset="utf-8"/>
	<meta content="author" content="francesc ricart"/>
	<style>
	div{
		font-weight:bold;
		font-size:22px;
	}
	div::before{
		content:"soy un texto azul delante";
		padding:5px;
		border:1px solid blue;
		margin-right:5px;
		color:blue;
		display:inline-block;
	}

	div::after{
		content:"soy un texto rojo detrás";
		padding:5px;
		border:1px solid red;
		margin-left:5px;
		color:red;
		display:inline-block;
	}

	</style>
</head>
<body>

	<div>|</div>

</body>
</html>

Resultado final conseguido:

Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS 1

¡Ah!

Otro uso puede ser directamente no poner nada. Por ejemplo:

li::before{content:''}
/*No importa poner comillas simples o dobles, pero sé coherente y hazlo siempre igual.*/

Importante: No puedes insertar html. Haz el test a ver si te funciona 😉

Ejemplos avanzados

¿Te gustaría estilizar listas ordenadas o listas no ordenadas según la imagen?

Entonces pásate por esta entrada dónde lo hacemos usando iconos de fontawesome.com

Qué son ::before (:before) y ::after(:after) y ejemplo de uso en CSS 2

¡Hola!

Querido lector,

¿Tienes clara la diferencia entre pseudoclase y pseudoelemento?

Ves a lo práctico.  Es importante pero no tan importante perderse en las definiciones. ¡Ponte a usarlo!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.