🎯 Pseudoelementos en Tailwind CSS

🔹 ::before

Clase Tailwind Equivalente CSS Ejemplo visual
before:content-['★'] before:text-pink-500 ::before { content: '★'; color: #ec4899; }
Texto con estrella al inicio

🔹 ::after

Clase Tailwind Equivalente CSS Ejemplo visual
after:content-['✓'] after:text-green-600 ::after { content: '✓'; color: #16a34a; }
Tarea completada

🔹 ::first-letter

Clase Tailwind Equivalente CSS Ejemplo visual
first-letter:text-red-500 first-letter:text-2xl first-letter:font-bold ::first-letter { color: red; font-size: 1.5rem; font-weight: bold; }
lorem ipsum dolor sit amet, consectetur adipiscing elit.

🔹 ::first-line

Clase Tailwind Equivalente CSS Ejemplo visual
first-line:uppercase first-line:tracking-wider ::first-line { text-transform: uppercase; letter-spacing: .1em; }
Esta es la primera línea. Esta es la segunda línea de ejemplo que no se verá afectada.