Tutorial CSS: Pseudo-clases y pseudo-elementos

Pseudo-clases de estado: :hover, :focus, :active, :visited

Las pseudo-clases en CSS permiten aplicar estilos a elementos basándose en estados o condiciones especiales que no están explícitamente definidos en el marcado HTML. Entre ellas, las pseudo-clases de estado son particularmente útiles para mejorar la interactividad de nuestras páginas web, ya que responden a las acciones del usuario.

¿Qué son las pseudo-clases de estado?

Las pseudo-clases de estado nos permiten definir estilos para diferentes estados de un elemento durante la interacción del usuario. Se añaden al selector con dos puntos (:) y representan momentos específicos en la vida de un elemento.

Veamos las cuatro pseudo-clases de estado más comunes:

:hover - Cuando el cursor está sobre el elemento

La pseudo-clase :hover se activa cuando el usuario coloca el puntero del ratón sobre un elemento. Es ideal para crear efectos de respuesta visual que mejoran la experiencia de usuario.

button {
  background-color: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
  cursor: pointer;
}

En este ejemplo, el botón cambia a un tono más oscuro de azul cuando el usuario pasa el cursor por encima. El uso de transition crea un efecto suave entre los estados.

Algunos usos comunes de :hover incluyen:

• Cambiar el color de fondo o texto de enlaces y botones
• Mostrar información adicional (como submenús)
• Aplicar efectos de escala o transformación

:focus - Cuando el elemento tiene el foco

La pseudo-clase :focus se activa cuando un elemento recibe el foco, ya sea mediante clic, toque o navegación por teclado (usando la tecla Tab). Es esencial para la accesibilidad web, especialmente para usuarios que navegan con teclado.

input {
  border: 2px solid #ddd;
  padding: 8px;
  outline: none;
}

input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

Este ejemplo muestra cómo un campo de entrada cambia su apariencia cuando recibe el foco, proporcionando una indicación visual clara al usuario sobre qué elemento está activo.

Es importante nunca eliminar completamente los estilos :focus (por ejemplo, con outline: none;) sin proporcionar una alternativa visual, ya que esto perjudica la accesibilidad.

:active - Durante la activación del elemento

La pseudo-clase :active se aplica cuando el elemento está siendo activado por el usuario. Para enlaces y botones, esto ocurre durante el tiempo que el usuario mantiene presionado el botón del ratón.

a {
  color: #3498db;
  text-decoration: none;
}

a:active {
  color: #e74c3c;
  position: relative;
  top: 1px; /* Efecto sutil de "presionado" */
}

En este ejemplo, cuando un usuario hace clic en un enlace, este cambia momentáneamente a color rojo y se desplaza un píxel hacia abajo, creando un efecto táctil de "presión".

La pseudo-clase :active es ideal para:

• Proporcionar retroalimentación inmediata durante la interacción
• Crear efectos de "pulsación" en botones
• Indicar que una acción está siendo procesada

:visited - Para enlaces visitados

La pseudo-clase :visited se aplica a los enlaces que el usuario ya ha visitado (según el historial del navegador). Esto ayuda a los usuarios a identificar qué contenido ya han visto.

a {
  color: #3498db;
}

a:visited {
  color: #9b59b6;
}

En este ejemplo, los enlaces no visitados aparecen en azul, mientras que los visitados se muestran en púrpura.

Por razones de privacidad, los navegadores limitan las propiedades CSS que pueden modificarse con :visited. Generalmente, solo se permite cambiar:

• color
• background-color (con limitaciones)
• border-color (y variantes)
• Algunos aspectos del outline

Propiedades como transform, animation o cambios de dimensión no funcionarán con :visited.

Combinando pseudo-clases de estado

Podemos crear interfaces más sofisticadas combinando varias pseudo-clases:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: all 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

.button:focus {
  outline: 2px solid #f39c12;
  outline-offset: 2px;
}

.button:active {
  background-color: #1f6aa5;
  transform: scale(0.98);
}

Este ejemplo crea un botón con diferentes estados visuales:

1. Cambia de color al pasar el cursor
2. Muestra un contorno cuando recibe el foco
3. Se oscurece y reduce ligeramente su tamaño cuando se hace clic

Orden de las pseudo-clases (LVHA)

Cuando se aplican varias pseudo-clases al mismo elemento, el orden en el que se declaran es importante. La regla mnemotécnica "LVHA" (Link, Visited, Hover, Active) ayuda a recordar el orden correcto:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

Este orden garantiza que cada estado tenga prioridad sobre el anterior, evitando que algunos estilos sean sobrescritos inadvertidamente.

Ejemplo práctico: Menú de navegación interactivo

Veamos un ejemplo completo que utiliza todas las pseudo-clases de estado para crear un menú de navegación interactivo:

.nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
}

.nav-menu a {
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.nav-menu a:visited {
  color: #555;
}

.nav-menu a:hover {
  background-color: #f0f0f0;
  color: #000;
}

.nav-menu a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.nav-menu a:active {
  background-color: #e0e0e0;
  transform: translateY(1px);
}

Este código crea un menú horizontal donde:

• Los enlaces cambian sutilmente de color cuando han sido visitados
• Se resaltan con un fondo gris claro al pasar el cursor
• Muestran un contorno azul cuando reciben el foco (útil para navegación por teclado)
• Tienen un efecto de "pulsación" cuando se hace clic en ellos

Las pseudo-clases de estado son herramientas fundamentales para crear interfaces que respondan a las interacciones del usuario, mejorando tanto la experiencia de usuario como la accesibilidad de nuestros sitios web.

Pseudo-clases estructurales: :first-child, :last-child, :nth-child()

Las pseudo-clases estructurales nos permiten seleccionar elementos basándonos en su posición dentro de la estructura del documento HTML. A diferencia de las pseudo-clases de estado que vimos anteriormente (que responden a interacciones del usuario), las pseudo-clases estructurales se basan en la relación entre elementos y su ubicación en el árbol DOM.

Estas herramientas son extremadamente útiles para aplicar estilos a elementos específicos sin necesidad de añadir clases adicionales en el HTML, lo que nos permite mantener un marcado más limpio y semántico.

La pseudo-clase :first-child

La pseudo-clase :first-child selecciona un elemento que es el primer hijo de su elemento padre. Es importante entender que el elemento debe ser tanto el tipo de elemento que estamos seleccionando como el primer hijo.

li:first-child {
  font-weight: bold;
  color: #e74c3c;
}

En este ejemplo, el primer elemento <li> dentro de cualquier lista recibirá un estilo en negrita y color rojo.

Veamos un ejemplo más completo:

.menu-items li:first-child {
  border-top: none;
  margin-top: 0;
}

Este código elimina el borde superior y el margen del primer elemento de lista dentro de un contenedor con la clase .menu-items, lo que resulta útil para evitar espacios o bordes innecesarios al principio de una lista.

Un error común es confundir el funcionamiento de :first-child. Por ejemplo:

<div>
  <p>Párrafo 1</p>
  <h2>Título</h2>
  <p>Párrafo 2</p>
</div>

Si aplicamos h2:first-child, no seleccionará nada, porque aunque hay un <h2>, este no es el primer hijo del <div>. El primer hijo es un <p>.

La pseudo-clase :last-child

De manera similar, :last-child selecciona un elemento que es el último hijo de su elemento padre:

.pricing-plan li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

Este código elimina el borde inferior y el margen del último elemento de una lista de precios, creando un aspecto más limpio.

Un caso de uso común es eliminar márgenes o bordes del último elemento de un grupo:

.card-content p:last-child {
  margin-bottom: 0;
}

Este ejemplo elimina el margen inferior del último párrafo dentro de un contenedor de tarjeta, evitando espacios en blanco innecesarios.

La potente pseudo-clase :nth-child()

La pseudo-clase :nth-child() es mucho más flexible y potente, ya que nos permite seleccionar elementos basados en fórmulas o patrones:

li:nth-child(3) {
  background-color: #f1c40f;
}

Este código selecciona específicamente el tercer elemento <li> y le aplica un fondo amarillo.

Lo que hace realmente poderoso a :nth-child() es que acepta expresiones matemáticas:

Seleccionar elementos pares e impares

/* Selecciona filas pares */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Selecciona filas impares */
tr:nth-child(odd) {
  background-color: #ffffff;
}

Este es un patrón muy común para crear tablas con filas alternadas, mejorando la legibilidad.

Usando fórmulas matemáticas

La fórmula general es an+b, donde:

• a es un número entero
• n es un contador que comienza en 0
• b es un número entero

Por ejemplo:

/* Selecciona cada tercer elemento, comenzando por el primero (1, 4, 7, etc.) */
li:nth-child(3n+1) {
  font-weight: bold;
}

/* Selecciona cada segundo elemento, comenzando por el segundo (2, 4, 6, etc.) */
li:nth-child(2n) {
  color: #3498db;
}

/* Selecciona los primeros 5 elementos */
li:nth-child(-n+5) {
  text-decoration: underline;
}

El último ejemplo es particularmente útil: -n+5 selecciona los elementos 5, 4, 3, 2 y 1, efectivamente seleccionando los primeros 5 elementos.

Ejemplo práctico: Galería de imágenes

Veamos cómo podemos usar estas pseudo-clases estructurales para crear una galería de imágenes con un diseño interesante:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s;
}

/* La primera imagen ocupa dos columnas y es más grande */
.gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
  height: auto;
}

/* Cada cuarta imagen (4, 8, 12...) tiene un borde especial */
.gallery img:nth-child(4n) {
  border: 3px solid #e74c3c;
}

/* Las imágenes en posiciones múltiplos de 3 tienen un efecto de escala al pasar el cursor */
.gallery img:nth-child(3n):hover {
  transform: scale(1.05);
}

Este código crea una galería donde:

• La primera imagen es destacada (más grande)
• Cada cuarta imagen tiene un borde rojo
• Las imágenes en posiciones múltiplos de 3 se agrandan ligeramente al pasar el cursor

Ejemplo práctico: Lista de precios

Otro ejemplo común es dar formato a listas de precios o características:

.features-list li {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

/* Elimina el borde del último elemento */
.features-list li:last-child {
  border-bottom: none;
}

/* Destaca características premium (cada tercera) */
.features-list li:nth-child(3n) {
  font-weight: bold;
  color: #9b59b6;
}

/* Añade un icono a los primeros 3 elementos */
.features-list li:nth-child(-n+3)::before {
  content: "★ ";
  color: #f1c40f;
}

Combinando pseudo-clases estructurales

Podemos combinar estas pseudo-clases para lograr selecciones más específicas:

/* Selecciona el último elemento de los primeros 3 elementos */
.container div:nth-child(-n+3):last-child {
  background-color: #2ecc71;
}

/* Selecciona elementos pares que también son el último hijo */
li:nth-child(even):last-child {
  font-style: italic;
}

Consideraciones importantes

1. Especificidad: Las pseudo-clases estructurales tienen la misma especificidad que las clases normales, por lo que pueden ser sobrescritas por selectores más específicos.

2. Rendimiento: Aunque son muy útiles, las pseudo-clases estructurales complejas pueden ser menos eficientes que las clases explícitas en el HTML para sitios muy grandes.

3. Compatibilidad: Todas estas pseudo-clases son ampliamente compatibles con navegadores modernos, pero si necesitas soporte para navegadores muy antiguos, verifica la compatibilidad.

4. Elementos vacíos: Ten en cuenta que los elementos vacíos (como espacios en blanco) pueden afectar a la numeración de los hijos.

Las pseudo-clases estructurales son herramientas poderosas que nos permiten crear diseños más dinámicos y mantener un HTML más limpio. Al dominarlas, podemos aplicar estilos de manera más eficiente y con mayor precisión, reduciendo la necesidad de clases adicionales en nuestro marcado.

Pseudo-elementos ::before y ::after para contenido generado

Los pseudo-elementos son una característica poderosa de CSS que nos permite crear elementos virtuales que no existen realmente en el HTML, pero que podemos estilizar como si fueran parte del documento. A diferencia de las pseudo-clases que vimos anteriormente, los pseudo-elementos se escriben con doble dos puntos (::) y nos permiten trabajar con partes específicas de un elemento.

Los dos pseudo-elementos más versátiles son ::before y ::after, que nos permiten insertar contenido generado antes o después del contenido de un elemento.

Sintaxis básica

La sintaxis para usar estos pseudo-elementos es muy sencilla:

.elemento::before {
  content: "Texto insertado antes";
  /* Otras propiedades CSS */
}

.elemento::after {
  content: "Texto insertado después";
  /* Otras propiedades CSS */
}

La propiedad content es obligatoria para que estos pseudo-elementos funcionen. Sin ella, el pseudo-elemento no se renderizará, aunque hayas definido otras propiedades de estilo.

Características importantes

Estos pseudo-elementos tienen algunas características que debes conocer:

• Son elementos en línea (inline) por defecto
• No son seleccionables por el usuario
• No aparecen en el DOM (no son accesibles mediante JavaScript)
• No son elementos reales de HTML, sino "fantasmas" creados por CSS
• No son interactivos por sí mismos (aunque pueden parecer interactivos con CSS)

Usos comunes de ::before y ::after

1. Añadir iconos o símbolos

Uno de los usos más comunes es añadir iconos o símbolos junto al contenido:

.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}

.required-field::after {
  content: "*";
  color: #e74c3c;
  margin-left: 4px;
}

En este ejemplo, añadimos una flecha a los enlaces externos y un asterisco a los campos obligatorios.

2. Crear elementos decorativos

Podemos crear elementos puramente decorativos:

.fancy-title::before,
.fancy-title::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: #333;
  margin: 0 10px;
  vertical-align: middle;
}

Este código añade líneas decorativas a ambos lados de un título, creando un efecto elegante sin necesidad de imágenes o elementos HTML adicionales.

3. Crear tooltips personalizados

Podemos crear tooltips o información emergente:

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.8em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

Este ejemplo crea un tooltip que aparece cuando el usuario pasa el cursor sobre un elemento con la clase .tooltip. El contenido del tooltip se toma del atributo data-tip del elemento HTML.

<span class="tooltip" data-tip="Información adicional">Pasa el cursor aquí</span>

4. Crear efectos de superposición

Podemos crear efectos de superposición o capas adicionales:

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover::before {
  opacity: 1;
}

Este código crea un efecto de superposición oscura que aparece gradualmente cuando el usuario pasa el cursor sobre una tarjeta.

La propiedad content y sus valores

La propiedad content puede aceptar diferentes tipos de valores:

Texto simple

.quote::before {
  content: """;
}

.quote::after {
  content: """;
}

Atributos del elemento

Podemos usar attr() para obtener el valor de un atributo del elemento HTML:

a::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
}

Este ejemplo muestra la URL de un enlace entre paréntesis después del texto del enlace.

Cadena vacía

Usar una cadena vacía es común cuando solo queremos crear un elemento visual sin texto:

.divider::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

Caracteres especiales y Unicode

Podemos usar caracteres Unicode para añadir símbolos:

.check-list li::before {
  content: "\2713"; /* Símbolo de verificación (✓) */
  color: #2ecc71;
  margin-right: 8px;
}

.warning::before {
  content: "\26A0"; /* Símbolo de advertencia (⚠) */
  color: #f39c12;
  margin-right: 8px;
}

Posicionamiento y estilización

Para aprovechar al máximo estos pseudo-elementos, a menudo necesitamos posicionarlos:

.info-box {
  position: relative;
  padding-left: 30px;
}

.info-box::before {
  content: "i";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: bold;
}

Este ejemplo crea un icono de información circular posicionado a la izquierda del elemento principal.

Ejemplo práctico: Creando un botón personalizado

Veamos cómo podemos usar ::before y ::after para crear un botón con efectos visuales interesantes:

.fancy-button {
  position: relative;
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s;
}

.fancy-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2980b9;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
  z-index: -1;
}

.fancy-button::after {
  content: "→";
  position: absolute;
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(-10px);
}

.fancy-button:hover {
  padding-right: 36px;
}

.fancy-button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.fancy-button:hover::after {
  opacity: 1;
  transform: translateX(0);
}

Este código crea un botón que, al pasar el cursor:

1. Muestra una animación de barrido de color de izquierda a derecha (usando ::before)
2. Hace aparecer una flecha a la derecha (usando ::after)

Ejemplo práctico: Creando una cita estilizada

Otro ejemplo útil es crear citas estilizadas:

blockquote {
  position: relative;
  padding: 20px 30px;
  background-color: #f9f9f9;
  border-left: 4px solid #3498db;
  margin: 20px 0;
}

blockquote::before {
  content: """;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 60px;
  color: rgba(52, 152, 219, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

blockquote::after {
  content: """;
  position: absolute;
  bottom: -20px;
  right: 10px;
  font-size: 60px;
  color: rgba(52, 152, 219, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

Este código crea un bloque de cita con comillas decorativas grandes al principio y al final.

Consideraciones importantes

1. Accesibilidad: El contenido generado con ::before y ::after no es accesible para lectores de pantalla. No uses estos pseudo-elementos para contenido importante que deba ser leído por todos los usuarios.

2. Contenido vacío: Recuerda que content: "" es necesario incluso si solo quieres crear un elemento visual sin texto.

3. Compatibilidad: La sintaxis con doble dos puntos (::) es la estándar en CSS3, pero para mayor compatibilidad con navegadores antiguos, a veces verás la sintaxis con un solo dos puntos (:before, :after).

4. Elementos reemplazados: Los pseudo-elementos ::before y ::after no funcionan en elementos reemplazados como <img>, <input>, <textarea>, etc.

Los pseudo-elementos ::before y ::after son herramientas increíblemente versátiles que nos permiten añadir detalles visuales y mejorar la experiencia de usuario sin sobrecargar nuestro HTML con elementos adicionales. Dominarlos te permitirá crear interfaces más ricas y expresivas manteniendo un código HTML limpio y semántico.

Pseudo-elementos para partes de elementos: ::first-line, ::placeholder

Los pseudo-elementos nos permiten seleccionar y estilizar partes específicas de un elemento HTML sin necesidad de añadir marcado adicional. Mientras que ::before y ::after crean contenido virtual, existen otros pseudo-elementos que nos permiten aplicar estilos a partes concretas que ya existen dentro de un elemento. Dos de los más útiles son ::first-line y ::placeholder.

El pseudo-elemento ::first-line

El pseudo-elemento ::first-line nos permite aplicar estilos únicamente a la primera línea de texto de un elemento de bloque. Lo interesante es que este pseudo-elemento se adapta dinámicamente al tamaño de la ventana: si el usuario redimensiona el navegador, CSS recalcula automáticamente qué texto constituye la "primera línea".

p::first-line {
  font-weight: bold;
  color: #3498db;
  text-transform: uppercase;
  letter-spacing: 1px;
}

En este ejemplo, la primera línea de cada párrafo aparecerá en negrita, color azul, con letras mayúsculas y un espaciado adicional entre caracteres.

Propiedades que se pueden aplicar a ::first-line

No todas las propiedades CSS funcionan con ::first-line. Las propiedades permitidas incluyen:

• Propiedades de fuente: font, font-family, font-size, font-weight, etc.
• Propiedades de color y fondo: color, background, background-color, etc.
• Propiedades de texto: text-decoration, text-transform, letter-spacing, word-spacing, etc.
• text-shadow
• vertical-align

Propiedades como margin, padding, border o height no tendrán efecto cuando se apliquen a ::first-line.

Ejemplos prácticos con ::first-line

Estilo de revista para artículos:

article p:first-of-type::first-line {
  font-variant: small-caps;
  font-size: 1.2em;
  font-weight: 600;
}

Este código crea un efecto de "entrada" elegante para el primer párrafo de un artículo, similar al estilo utilizado en revistas impresas.

Destacar el inicio de un texto largo:

.story::first-line {
  color: #2c3e50;
  font-weight: bold;
  font-style: italic;
}

Este estilo ayuda a los lectores a "entrar" en un texto largo, destacando visualmente la primera línea.

Combinación con otras pseudo-clases:

blockquote:hover::first-line {
  color: #e74c3c;
  transition: color 0.3s;
}

En este ejemplo, la primera línea de una cita cambia de color cuando el usuario pasa el cursor sobre ella, creando un efecto interactivo sutil.

El pseudo-elemento ::placeholder

El pseudo-elemento ::placeholder nos permite estilizar el texto de marcador de posición (placeholder) que aparece en elementos de formulario como <input> y <textarea>. Este texto orientativo desaparece cuando el usuario comienza a escribir.

input::placeholder {
  color: #95a5a6;
  font-style: italic;
  opacity: 0.7;
}

Este código cambia el color del texto del placeholder a un gris suave, lo pone en cursiva y reduce ligeramente su opacidad para diferenciarlo mejor del texto que introducirá el usuario.

Compatibilidad y prefijos de navegador

Aunque actualmente la mayoría de los navegadores modernos soportan ::placeholder sin prefijos, para garantizar la máxima compatibilidad en proyectos que necesiten soportar navegadores más antiguos, puedes incluir las versiones con prefijo:

::-webkit-input-placeholder { /* Chrome, Safari, Edge */
  color: #95a5a6;
  font-style: italic;
}

::-moz-placeholder { /* Firefox */
  color: #95a5a6;
  font-style: italic;
  opacity: 1; /* Firefox reduce la opacidad por defecto */
}

:-ms-input-placeholder { /* Internet Explorer */
  color: #95a5a6;
  font-style: italic;
}

Propiedades que se pueden aplicar a ::placeholder

Las propiedades más comunes que funcionan con ::placeholder incluyen:

• color
• font y sus variantes (font-family, font-size, font-style, etc.)
• text-decoration, text-transform, letter-spacing
• background-color (aunque no es muy común usarla)
• opacity

Ejemplos prácticos con ::placeholder

Formulario con estilo corporativo:

.brand-form input::placeholder,
.brand-form textarea::placeholder {
  color: #3498db;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
}

Este código aplica el color corporativo y la tipografía de la marca a los placeholders, creando una experiencia de usuario más coherente con la identidad visual.

Placeholder con transición al enfocar:

input::placeholder {
  color: #bdc3c7;
  transition: opacity 0.3s;
}

input:focus::placeholder {
  opacity: 0.4;
}

En este ejemplo, el texto del placeholder se desvanece parcialmente cuando el usuario hace clic en el campo, reduciendo la distracción visual pero manteniendo la referencia.

Indicación de formato requerido:

input[type="date"]::placeholder,
input[type="tel"]::placeholder {
  letter-spacing: 1px;
  font-size: 0.85em;
  text-transform: uppercase;
}

Este estilo hace que los placeholders para campos con formato específico (como fechas o teléfonos) sean más distintivos, ayudando al usuario a identificar qué tipo de información se espera.

Ejemplo práctico: Formulario de contacto estilizado

Veamos un ejemplo completo que combina ambos pseudo-elementos para crear un formulario de contacto con estilo:

.contact-form {
  max-width: 500px;
  margin: 0 auto;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #2c3e50;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Estilo para placeholders */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #95a5a6;
  font-style: italic;
  opacity: 0.7;
  transition: opacity 0.3s;
}

/* Placeholder se desvanece al enfocar */
.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder {
  opacity: 0.3;
}

/* Primera línea del textarea con estilo especial */
.contact-form textarea::first-line {
  font-weight: bold;
  color: #3498db;
}

.contact-form button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.contact-form button:hover {
  background-color: #2980b9;
}

En este ejemplo:

1. Los placeholders tienen un estilo distintivo en gris claro e itálica
2. Cuando el usuario enfoca un campo, el placeholder se desvanece para reducir distracciones
3. En el área de texto, la primera línea que escribe el usuario aparece en negrita y azul, creando una jerarquía visual

Diferencias entre ::first-line y ::first-letter

Aunque no lo hemos cubierto en detalle, existe también el pseudo-elemento ::first-letter que permite estilizar solo la primera letra de un elemento. Es importante entender la diferencia:

p::first-line {
  /* Afecta a toda la primera línea, que puede cambiar si se redimensiona la ventana */
  color: blue;
}

p::first-letter {
  /* Afecta solo a la primera letra del párrafo */
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

Consideraciones importantes

1. Accesibilidad: Al estilizar placeholders, asegúrate de mantener suficiente contraste para que sean legibles. No uses placeholders como reemplazo de etiquetas (<label>), ya que esto perjudica la accesibilidad.

2. Responsividad: Recuerda que ::first-line se adapta al tamaño de la ventana, por lo que el texto afectado puede cambiar en diferentes dispositivos.

3. Compatibilidad: Aunque estos pseudo-elementos tienen buen soporte en navegadores modernos, siempre es recomendable probar en diferentes navegadores, especialmente si necesitas compatibilidad con versiones antiguas.

4. Limitaciones: ::first-line solo funciona en elementos de bloque o elementos con display: block o display: inline-block.

5. Combinación: Estos pseudo-elementos se pueden combinar con pseudo-clases como :hover, :focus o :required para crear interacciones más sofisticadas.

Los pseudo-elementos ::first-line y ::placeholder son herramientas sutiles pero poderosas que pueden mejorar significativamente la experiencia de usuario y la estética de tu sitio web sin necesidad de añadir marcado HTML adicional. Al dominar estos recursos, podrás crear interfaces más refinadas y profesionales manteniendo un código limpio y semántico.