9.1 Pseudoelementos ::before y ::after
Los pseudoelementos ::before y ::after son herramientas poderosas en CSS que permiten añadir elementos decorativos
antes o después del contenido de los elementos sin cambiar el HTML. Se utilizan ampliamente para crear efectos visuales,
mejorar la interfaz de usuario y añadir estilos a los elementos.
Descripción:
::before: pseudoelemento que se añade antes del contenido del elemento::after: pseudoelemento que se añade después del contenido del elemento
Sintaxis:
element::before {
/* estilos para el pseudoelemento before */
}
element::after {
/* estilos para el pseudoelemento after */
}
Propiedades principales
Los pseudoelementos ::before y ::after pueden contener prácticamente cualquier propiedad CSS, incluyendo color, tamaño,
posicionamiento, fondo, sombras, etc. Sin embargo, para que el pseudoelemento sea visible, es necesario asignarle contenido y tamaño.
content: define el contenido del pseudoelemento. Puede ser texto o imagen, o incluso una cadena vacíadisplay: establece el tipo de visualización del pseudoelemento. Se suele usarblockoinline-blockposition: controla la posición del pseudoelemento (por ejemplo,absoluteorelative)widthyheight: establecen el tamaño del pseudoelemento
9.2 Adición de texto
Con la propiedad content es fácil añadir texto al inicio o al final de cualquier elemento.
.example::before {
content: "Inicio: ";
color: blue;
}
.example::after {
content: " :Fin";
color: red;
}
<body>
<p class="example">Este es un ejemplo de texto</p>
</body>
Explicación del código:
.example::before: añade el texto "Inicio: " antes del contenido del elemento y lo colorea de azul.example::after: añade el texto " :Fin" después del contenido del elemento y lo colorea de rojo
9.3 Líneas decorativas
También puedes añadir líneas decorativas que enmarquen el contenido:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Texto con líneas decorativas</div>
</body>
Explicación del código:
.decorative-line::before: crea una línea decorativa antes del contenido del elemento.decorative-line::after: crea una línea decorativa después del contenido del elemento
9.4 Inserción de iconos
¿No tienes suficiente texto? Pues fácilmente puedes insertar un par de iconos:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Texto con icono</p>
</body>
Explicación del código:
.icon::before: añade un icono antes del texto usando la URL de la imagen
9.5 Elementos decorativos complejos
Bueno, y vamos a añadir algo más complejo:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Elemento con esquina decorativa</div>
</body>
Explicación del código:
.complex-decor::before: crea un elemento decorativo antes del contenido principal, usando un degradado y posicionamiento absoluto.complex-decor: establece el posicionamiento relativo para el elemento padre, de modo que el pseudoelemento pueda posicionarse en relación a él
9.6 Uso de animaciones
Incluso puedes añadir animaciones:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Explicación del código:
.animated::before: crea un pseudoelemento cuadrado y lo anima para que gire con @keyframes
GO TO FULL VERSION