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!
Deja una respuesta