27 Mar 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:
¡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
¡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!
Lorena
Posted at 20:21h, 25 abrilMuy 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¡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 julioHe 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 julioHola 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,