Contenido de ::before y ::after
Inserte contenido generado antes o después de los elementos mediante ::before y ::after con la propiedad content.
Contenido de ::before y ::after es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son los pseudoelementos?
Los pseudoelementos crean elementos virtuales a los que se aplica estilo como si formaran parte del DOM. Utilizan dos puntos dobles ::. Los más utilizados son ::before y ::after.
::before y ::after
::before inserta contenido generado antes del contenido de un elemento. ::after lo inserta después. Ambos requieren la propiedad content para representarse.
<span class="element">Text with generated content</span>La propiedad content
La propiedad content acepta:
- Una cadena:
content: "text" - Una cadena vacía:
content: ""(común para formas decorativas) - Una URL:
content: url("icon.svg") - Un contador:
content: counter(step) attr():content: attr(data-tooltip)
Comillas decorativas
Añada comillas tipográficas sin agregarlas al HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Formas con content vacío
Establecer content: "" junto con una posición y unas dimensiones permite crear formas decorativas sin HTML adicional:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Clearfix con ::after
El clearfix clásico utiliza ::after para limpiar los floats sin marcado adicional:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Tooltip con ::after
Tooltip creado únicamente con CSS mediante ::after y attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Icono con content: url()
Inserte un icono pequeño antes de los enlaces mediante content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Limitaciones de los pseudoelementos
Los pseudoelementos no forman parte del DOM. No son:
- Seleccionables ni buscables por los usuarios
- Accesibles para los lectores de pantalla de forma predeterminada
- Accesibles mediante JavaScript
No coloque nunca contenido esencial en contenido generado; utilícelos únicamente con fines decorativos.
Dos puntos simples frente a dobles
Los dos puntos simples (:before) eran la sintaxis de CSS2. Los dos puntos dobles (::before) son el estándar de CSS3, que distingue los pseudoelementos de las pseudoclases. Ambos funcionan en los navegadores modernos, pero utilice dos puntos dobles en el código nuevo.
Elementos compatibles con ::before/::after
Los elementos reemplazados (img, input, select, video) no pueden tener pseudoelementos porque no disponen de un área de contenido en la que insertarlos. Utilice un elemento contenedor para la decoración.
Comprobación rápida
¿Qué valor de content se necesita para un pseudoelemento decorativo ::before sin texto visible?
Resumen
::before y ::after insertan contenido generado alrededor del contenido real de un elemento. La propiedad content es obligatoria. Utilícelos para crear formas decorativas, iconos, comillas y tooltips, pero nunca para contenido significativo al que los usuarios necesiten acceder o que deban leer.
Preguntas frecuentes
¿La lección «Contenido de ::before y ::after» es gratis?
Sí — el texto completo de «Contenido de ::before y ::after» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Contenido de ::before y ::after»?
Inserte contenido generado antes o después de los elementos mediante ::before y ::after con la propiedad content. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Contenido de ::before y ::after»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Contenido de ::before y ::after
- ::placeholder, ::selection y ::marker
- Contadores CSS con ::before
- Patrones decorativos con pseudoelementos