Cargando...

Pseudo-elementos CSS

Las pseudo-clases cambian el aspecto cuando cambia un estado (:hover, :focus). Los pseudo-elementos van más allá: puedes estilar una parte del texto o crear una cajita antes o después del contenido real — con dos puntos dobles (::) y sin etiquetas extra en el HTML.

¿Qué significa pseudo-elemento?

Un pseudo-elemento es una palabra que se pega al selector con ::. Apunta a algo que no es un elemento completo en el markup: la primera letra, la primera línea o una caja generada antes/después del contenido. Para ::before y ::after casi siempre hace falta content para que se vea algo.

Cuatro pseudo-elementos habituales

Empieza por estos. La forma antigua con un solo dos puntos (:before) aún funciona en muchos navegadores, pero escribe la moderna con doble.

📊 Pseudo-elementos cotidianos de CSS

Pseudo-elemento Qué estila Ejemplo
::before Caja antes del contenido del elemento p::before
::after Caja después del contenido del elemento a::after
::first-letter Primera letra de un bloque de texto p::first-letter
::first-line Primera línea de un bloque de texto p::first-line

Antes del contenido — ::before y content

::before crea una caja virtual antes del texto real. Casi siempre pones content — una cadena, o "" para una caja vacía decorativa.

Antes — comilla de apertura

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

No olvides content

Sin content, muchas reglas ::before/::after no muestran nada. Para una barra de color o un icono de fondo basta content: "".

Después del contenido — ::after

::after es la misma idea después del contenido — para unidades, insignias o un sufijo pequeño.

Después — pista de enlace externo

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

No escondas el significado necesario aquí

Los lectores de pantalla y algunas herramientas tratan el contenido generado de forma irregular. No pongas instrucciones importantes solo en ::before/::after; deja el texto real en el HTML.

Primera letra — ::first-letter

::first-letter estila la primera letra de un bloque de texto — el clásico carácter grande al abrir un párrafo.

Primera letra — carácter inicial mayor

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

Primera línea — ::first-line

::first-line estila solo la primera línea visible — no «la primera frase», sino la línea que arma el navegador al partir el texto.

Primera línea — un poco más fuerte

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Caja vacía decorativa

A veces solo quieres una franja de color sin texto. Con content: "" basta.

before vacío — franja decorativa

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

Buenos hábitos

  • Pseudo-elemento = dos puntos dobles (::before); pseudo-clase = simples (:hover)
  • Pon content en ::before/::after si debe verse algo
  • Mantén el texto esencial en HTML, no solo en contenido generado
  • ::first-letter y ::first-line trabajan sobre bloques con texto
  • Prefiere :: moderno aunque :before antiguo aún funcione

Pruébalo tú

  1. Página corta con párrafo .quote, párrafo .lead, enlace a.external y .card con texto.
  2. Añade .quote::before { content: "“"; color: #0f766e; } y mira la comilla.
  3. En el enlace con class external: a.external::after { content: " ↗"; }.
  4. Agranda .lead::first-letter en teal; estila .lead::first-line con font-weight: 600.
  5. Añade .card::before { content: ""; display: block; height: 4px; background: #0f766e; } para la barra superior.

Errores habituales

  • Escribir :before cuando querías un estado como :hover — estado un dos puntos; caja generada dos
  • Olvidar content y que no aparezca nada
  • Poner la única copia de una advertencia solo en ::after
  • Esperar magia de ::first-letter en un elemento vacío o solo imagen
  • Confundir ::first-line con «primera frase» — el ajuste de línea del navegador decide

Resumen

  • Los pseudo-elementos con :: estilan una parte o una caja generada
  • ::before/::after necesitan content (cadena o "")
  • ::first-letter y ::first-line toman el inicio del bloque de texto
  • El significado crítico queda en el HTML
  • Unos dos puntos = pseudo-clase; dobles = pseudo-elemento
  • Practica con comilla, sufijo de enlace y párrafo lead

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial