Pseudo-elementos

5.1 Principales pseudo-elementos

Los pseudo-elementos en CSS permiten a los desarrolladores añadir estilos y contenido a partes del documento que no pueden ser seleccionadas con selectores normales. Crean elementos "virtuales" que pueden ser estilizados como si fueran parte del marcado HTML. Es una herramienta poderosa para crear diseños complicados y mejorar la apariencia de las páginas web.

¿Qué son los pseudo-elementos?

Los pseudo-elementos son palabras clave añadidas a los selectores que permiten estilizar partes específicas de los elementos. Crean elementos virtuales que se convierten en parte del diseño visual, pero no cambian el marcado HTML original. Los pseudo-elementos se usan comúnmente para estilizar las primeras letras, líneas de texto, agregar elementos decorativos y otras tareas.

Pseudo-elementos principales

Algunos de los pseudo-elementos más utilizados incluyen:

• ::before: añade contenido antes del contenido del elemento seleccionado
• ::after: añade contenido después del contenido del elemento seleccionado
• ::first-letter: estiliza la primera letra del elemento
• ::first-line: estiliza la primera línea del elemento
• ::selection: estiliza el texto seleccionado por el usuario

Cómo utilizar pseudo-elementos

Los pseudo-elementos en CSS se indican con doble dos puntos (::), aunque algunos pseudo-elementos también pueden soportar la notación de un solo punto (:) para compatibilidad hacia atrás.

Sintaxis:

    
      selector::pseudo-elemento {
        propiedad: valor;
        propiedad: valor;
        propiedad: valor;
        ...
      }
    
  

5.2 Ejemplos de uso de pseudo-elementos

1. Adición de elementos decorativos

Los pseudo-elementos se utilizan a menudo para añadir elementos decorativos antes o después del contenido de un elemento:

    
      /* Añadir un icono antes del texto del enlace */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Añadir un elemento decorativo después del párrafo */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

En estos ejemplos, los pseudo-elementos ::before y ::after se utilizan para añadir un icono antes del texto del enlace y un elemento decorativo después del párrafo, respectivamente.

2. Estilización de primeras letras y líneas

Los pseudo-elementos se pueden usar para estilizar las primeras letras o las primeras líneas de texto, algo que se aplica con frecuencia en tipografía:

    
      /* Estilización de la primera letra del párrafo */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Estilización de la primera línea del párrafo */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

En estos ejemplos, los pseudo-elementos ::first-letter y ::first-line se usan para estilizar la primera letra y la primera línea del párrafo.

3. Selección de texto

El pseudo-elemento ::selection se utiliza para estilizar el texto que ha sido seleccionado por el usuario:

    
      /* Estilización del texto seleccionado */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

En este ejemplo, el texto seleccionado por el usuario tendrá un fondo azul y el texto será de color blanco.

5.3 Características y limitaciones de los pseudo-elementos

Limitaciones:

• Uso único: los pseudo-elementos ::before y ::after solo pueden ser utilizados una vez en cada elemento
• Requisito de content: los pseudo-elementos ::before y ::after requieren el uso de la propiedad content, incluso si está vacío
• Compatibilidad con navegadores: los navegadores modernos soportan el uso de doble dos puntos para pseudo-elementos, pero para compatibilidad con navegadores más antiguos, el uso de un solo punto también funciona

Ejemplo de uso de la propiedad content

    
      /* Ejemplo de un pseudo-elemento vacío para un elemento decorativo */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

En este ejemplo, el pseudo-elemento vacío ::before se utiliza para añadir una barra decorativa antes del contenido del div.