Efectos de texto con CSS ::after y ::before

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.
Efecto de texto con ::after y ::before

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);
}