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

1
(1)

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 1 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

4 Comments
  • Lorena
    Posted at 20:21h, 25 abril Responder

    Muy buena introducción, mi pregunta es, ¿Estos pseudo elementos son también accesibles por el dom en javascript? ¿Jquery tiene métodos para ellos? Gracias !

    • Francesc Ricart
      Posted at 23:50h, 25 abril Responder

      ¡gracias por tu comentario Lorena!
      La verdad nunca antes me había planteado lo que comentas.
      Creo que este enlace aporta algo de luz.
      Según parece son elementos virtuales añadidos por los navegadores y que por tanto no forman parte del HTML y en consecuencia tampoco del DOM.
      Con jquery si se puede. Trastea los métodos .before() y .after. Yo lo he probado y funciona correctamente.

  • Santos Agustín
    Posted at 04:57h, 06 julio Responder

    He buscado información en donde se combinen estas pseudo clases con otras como active o hover y la verdad no he tenido suerte. Desgraciadamente por lo que he visto pareciera que se copiaran unos a otros, creo que debería haber, además del copiado, aporte de nuevas experiencias respecto al tema.

    • Francesc Ricart
      Posted at 18:12h, 06 julio Responder

      Hola Agustín,
      Gracias por dedicar tu tiempo para comentar.
      El css no me lo invento, faltaría más.
      En cualquier caso no he copiado de otros, es contenido original que surgió durante una explicación real de una clase en un centro formativo.
      Como experiencia extra puedes pasarte por este enlace.

      Saludos,

Post A Comment

  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.