Crear efectos vistosos usando los pseudo-elementos ::after y ::before en CSS puede ser muy divertido y útil para añadir detalles estéticos a tus elementos HTML sin necesidad de agregar más marcado HTML. Estos pseudo-elementos permiten decorar, añadir contenido, y crear formas o efectos visuales interesantes directamente desde CSS. Vamos a crear un ejemplo donde utilizaremos ::after y ::before para añadir un efecto de sombra y un borde decorativo a un elemento de texto, respectivamente.
Para el ejemplo que vamos a desarrollar, empezamos dándole al elemento .texto-decorado una posición relative para que los pseudo-elementos ::after y ::before, que tendrán posición absolute, se posicionen en relación a él. Esto es importante para que la decoración se mantenga alrededor del elemento correctamente.
El pseudo-elemento ::before crea un borde alrededor del texto. Utilizamos content: «» para indicar que no añadiremos contenido textual, simplemente queremos el efecto visual del borde. transform: rotate(-2deg); añade un ligero ángulo al borde, dándole un aspecto dinámico y menos rígido.
Con ::after, generamos una sombra falsa debajo y a la derecha del texto. Esto lo logramos desplazando ligeramente el pseudo-elemento con top: 5px; y left: 5px;, y añadiendo box-shadow para crear la ilusión de profundidad.
Este ejemplo muestra cómo puedes utilizar ::after y ::before para añadir detalles visuales interesantes a tus elementos sin complicar tu HTML. Puedes experimentar con diferentes propiedades como border-radius, background, y transform para crear efectos aún más vistosos y únicos.
CSS
.texto-decorado {
position: relative;
display: inline-block;
font-size: 24px;
color: #333;
}
.texto-decorado::before {
content: "";
position: absolute;
top: -15px;
left: -5px;
width: calc(100% + 30px);
height: calc(100% + 30px);
border: 2px solid #ff4500;
z-index: -1;
transform: rotate(-2deg);
}
.texto-decorado::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: -2;
top: 5px;
left: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
El código html necesario es realmente sencillo:
HTML Hola! Cómo te va?