Pseudoelementos en CSS: ¿Qué son y como usar?

Los pseudoelementos en CSS son herramientas poderosas que permiten añadir estilo a partes específicas de un elemento sin modificar el HTML. En este artículo, te explicamos qué son, para qué sirven y cómo usar diferentes tipos de pseudoelementos. Con ejemplos claros, aprenderás a mejorar el diseño de tu página web de manera efectiva.

1. ¿Qué son los pseudoelementos en CSS?

Los pseudoelementos son una herramienta poderosa en CSS que te permiten agregar contenido y estilo a tus elementos HTML sin necesidad de modificar su estructura. Son elementos virtuales que no existen en el HTML en sí, pero que se pueden crear y manipular mediante selectores CSS.

1.1. Ejemplo para entender que es un pseudoelemento. Usando ::before.

Imagina que quieres añadirá un icono antes del contenido de un párrafo usando un pseudoelemento. Puedes lograr esto utilizando el pseudoelemento ::before de la siguiente manera:

HTML para el texto:

    <p class="icon-before">Este es un párrafo de ejemplo.</p>¡Lenguaje del código: HTML, XML (xml)

CSS con APLICACIÓN DEL PSEUDOELEMENTO ::before:

.icon-before::before {
    content: '★ ';
    color: gold;
    font-size: 1.2em;
    margin-right: 8px;
}Lenguaje del código: CSS (css)

RESULTADO VISUAL:

EXPLICACIÓN:

1. HTML: Se crea un párrafo con la clase icon-before.
2. CSS: Se usa el pseudoelemento ::before junto con la clase del párrafo icon-before:
   • content: Se usa para agregar el icono de estrella (★) antes del contenido del párrafo.
   • color: Se establece el color dorado para la estrella.
   • font-size: Se aumenta el tamaño de la estrella.
   • margin-right: Se añade un margen a la derecha del icono para separarlo del texto del párrafo.

CONCLUSIÓN: Este ejemplo muestra de manera clara y sencilla cómo el pseudoelemento ::before puede ser usado para añadir elementos decorativos o de contenido (estilos CSS) antes del contenido principal de un elemento.

2. Sintaxis general de los pseudoelementos.

La sintaxis para utilizar pseudoelementos en CSS es la siguiente:

selector ::pseudoelemento {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

EXPLICACIÓN DE LA SINTAXIS:

1. Selector:

• El selector CSS es la parte de la regla CSS que identifica el elemento HTML al que se le quiere aplicar el estilo. Puede ser un selector simple (p), un selector por clase (button), un selector por ID (#main), etc.

2. Dos puntos dobles (::):

• Los dos puntos dobles separan el selector del pseudoelemento. Esta notación distingue a los pseudoelementos de las pseudoclases, que solo utilizan dos puntos (:).

3. Nombre del pseudoelemento:

• El nombre del pseudoelemento indica qué tipo de pseudoelemento se quiere utilizar. Los dos pseudoelementos más comunes son:
  • ::before: Agrega contenido antes del elemento original.
  • ::after: Agrega contenido después del elemento original.

4. Llaves ({ }):

• Las llaves encierran las propiedades CSS que se aplicarán al pseudoelemento.

5. Propiedades CSS:

• Dentro de las llaves, puedes especificar cualquier propiedad CSS válida para dar estilo al pseudoelemento.
  • Por ejemplo, puedes usar propiedades como content, position, top, left, bottom, right, font-size, color, background, etc.

EJEMPLO:

p::before {
  content: '• '; /* Agrega una viñeta antes de cada párrafo */
  font-size: 12px; /* Tamaño de la viñeta */
  color: #ccc; /* Color de la viñeta */
}
Lenguaje del código: CSS (css)

En este ejemplo:

• Se selecciona todos los párrafos (p) con el pseudoelemento ::before.
• Se agrega una viñeta (•) antes de cada párrafo con la propiedad content.
• Se establece el tamaño de la viñeta en 12 píxeles con font-size.
• Se define el color de la viñeta como gris claro con color.

CONSELOS AL APLICAR PSEUDOELEMENTOS:

• La sintaxis con dos puntos dobles (::) es la forma correcta y recomendada para utilizar pseudoelementos en CSS3.
• Algunos pseudoelementos tienen propiedades específicas que solo se pueden aplicar a ellos.
• Puedes combinar pseudoelementos con otras técnicas CSS para crear diseños web más complejos y llamativos.

3. ¿Cuáles son los pseudoelementos más usados?.

Los pseudoelementos más usados en CSS son ::before y ::after, pero también hay otros que son muy útiles para estilizar partes específicas de un elemento.

A continuación, se detallan los pseudoelementos más comunes y sus usos:

1. ::before y ::after:
2. ::first-line:
3. ::first-letter
4. ::selection
5. ::placeholder
6. ::marker
7. ::backdrop
8. ::cue

3.1. ::before y ::after:

Los pseudoelementos ::before y ::after en CSS que te permiten agregar contenido y estilo a tus elementos HTML sin necesidad de modificar su estructura.

Son elementos virtuales que se insertan antes o después del elemento original, lo que te brinda una gran flexibilidad para crear diseños web más dinámicos, interactivos y accesibles.

A continuación, se profundiza en las características y usos de cada uno:

3.1.1. Pseudoelemento ::before:

Comportamientos de ::before:

1. Inserción de contenido: Se utiliza para agregar contenido ANTES del elemento original.
   • Puedes insertar texto, imágenes, íconos o cualquier otro tipo de contenido.
   • Es útil para crear viñetas personalizadas, bordes decorativos, indicadores de carga, etc.
2. Posicionamiento flexible: Puedes controlar la posición del pseudoelemento ::before dentro del flujo del documento utilizando propiedades como position, top, left, bottom y right.
   • Esto te permite colocarlo exactamente donde lo necesitas, independientemente de la posición del elemento original.
3. Efectos visuales: Puedes aplicar estilos CSS como color, background, font-size, border, shadow, etc. para crear efectos visuales llamativos.
   • Esto te permite personalizar la apariencia del pseudoelemento y adaptarlo al diseño de tu página web.

3.1.2. Pseudoelemento ::after:

Comportamientos de ::after:

1. Inserción de contenido: Se utiliza para agregar contenido DESPUÉS del elemento original.
   • Puedes insertar texto, imágenes, íconos o cualquier otro tipo de contenido.
   • Es útil para crear comillas decorativas, indicadores de estado (cargando, completado), bordes personalizados, etc.
2. Posicionamiento flexible: Puedes controlar la posición del pseudoelemento ::after dentro del flujo del documento utilizando propiedades como position, top, left, bottom y right.
   • Esto te permite colocarlo exactamente donde lo necesitas, independientemente de la posición del elemento original.
3. Efectos visuales: Puedes aplicar estilos CSS como color, background, font-size, border, shadow, etc. para crear efectos visuales llamativos.
   • Esto te permite personalizar la apariencia del pseudoelemento y adaptarlo al diseño de tu página web.

3.1.3. Ejemplo usando ::before y ::after:

Vamos a agregar comillas decorativas al principio y final de un bloque de texto usando ::before y ::after:

HTML: Primero introducimos el bloque te texto.

<blockquote cite="https://example.com">
  Este es un ejemplo de texto citado.
</blockquote>Lenguaje del código: HTML, XML (xml)

CSS: Agregamos comillas usando ::before y ::after:

blockquote::before {
  content: '“'; /* Comilla de apertura */
  font-size: 2em; /* Tamaño de la comilla */
  color: #999; /* Color de la comilla */
  margin-left: -0.5em; /* Ajustar margen izquierdo */
}

blockquote::after {
  content: '”'; /* Comilla de cierre */
  font-size: 2em; /* Tamaño de la comilla */
  color: #999; /* Color de la comilla */
  margin-right: -0.5em; /* Ajustar margen derecho */
}Lenguaje del código: CSS (css)

Explicación:

• Se seleccionan los pseudoelementos ::before y ::after del elemento blockquote.
• Se define el contenido de cada comilla (“ y ”).
• Se aumenta el tamaño de las comillas con font-size.
• Se ajusta el margen izquierdo y derecho de las comillas para que no se superpongan al texto.

Resultado visual:

3.1.4. Características comunes ::before y ::after:

• Posicionamiento: Puedes controlar la posición del pseudoelemento dentro del flujo del documento utilizando propiedades como position, top, left, bottom y right.
• Estilo: Puedes aplicarles propiedades CSS como color, background, font-size, border, etc. para personalizar su apariencia.
• Combinación con otras técnicas CSS: Puedes combinar pseudoelementos con otras técnicas CSS para crear diseños web más complejos y llamativos.

3.2. ::first-line:

El pseudoelemento ::first-line nos permite selecciona la primera línea del contenido de un elemento de bloque.

El tamaño de la primera línea depende de varios factores, como el ancho del contenedor y el tamaño de la fuente.

CARACTERÍSTICAS PRINCIPALES DE ::first-line:

1. Aplica estilos a la primera línea:
   • Afecta únicamente la primera línea visible del elemento, incluyendo sangrías, márgenes, color de fondo, decoración de texto y otras propiedades CSS.
2. Compatible con varios elementos:
   • Funciona con elementos de bloque como párrafos (<p>), encabezados (<h1>, <h2>, etc.), listas (<ul>, <ol>), bloques de cotización (<blockquote>) y otros.

SINTAXIS DE ::first-line:

elemento::first-line {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

PROPIEDADES COMUNES APLICABLES A ::first-line:

No todas las propiedades CSS pueden ser aplicadas al pseudoelemento ::first-line. Las propiedades que sí se pueden usar incluyen:

• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

EJEMPLO USANDO ::first-line:

Supongamos que queremos aplicar estilo a la primera línea de un párrafo

HTML:

<p class="styled-paragraph">
           Esta es la primera línea de un párrafo. Este texto se utiliza para demostrar el uso delpseudoelemento ::first-line en CSS. La primera línea de este párrafo tiene un estilo diferente al resto del texto.
</p>Lenguaje del código: HTML, XML (xml)

CSS con ::first-line:

.styled-paragraph::first-line {
    font-weight: bold;
    color: blue;
    font-size: 1.2em;
    text-transform: uppercase;
    background-color: yellow;
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crea un párrafo con la clase styled-paragraph.
• CSS: Pseudoelemento ::first-line para aplicar estilo a la primera línea del párrafo:
  • font-weight: Aplica un estilo de fuente en negrita a la primera línea.
  • color: Cambia el color del texto de la primera línea a azul.
  • font-size: Aumenta el tamaño de la fuente de la primera línea.
  • text-transform: Transforma el texto de la primera línea a mayúsculas.
  • background-color: Establece un color de fondo amarillo para la primera línea.

Resultado visual del ejemplo:

APLICACIONES COMUNES ::first-line::

• Destacar títulos: Enfatizar los títulos de secciones o párrafos importantes.
• Crear letras capitales: Dar un estilo de mayúsculas iniciales a la primera línea.
• Resaltar inicios de párrafos: Diferenciar el inicio de cada párrafo del resto del texto.
• Mejorar la legibilidad: Aumentar la legibilidad al separar visualmente la primera línea.
• Efectos decorativos: Agregar líneas decorativas o bordes a la primera línea.

CONSIDERACIONES DE ::first-line:

• Longitud de la primera línea: La longitud de la primera línea depende de varios factores, como el ancho del elemento, el ancho de la ventana y el tamaño de la fuente.
• Compatibilidad: El soporte para ::first-line es amplio en navegadores modernos, pero algunos navegadores más antiguos pueden no ser compatibles.
• Alternativas: Si necesitas más control sobre el estilo de la primera línea, puedes considerar usar clases CSS o combinadores de selectores.

3.3. ::first-letter

El pseudoelemento ::first-letter te permite aplicar estilos específicos a la primera letra de un bloque de texto. Esto te da la flexibilidad de darle un formato diferente a la primera letra, destacándola del resto del texto.

Características principales DE ::first-letter:

1. Aplica estilos a la primera letra:
   • Afecta únicamente la primera letra visible del elemento, incluyendo tamaño de fuente, color, decoración de texto, mayúsculas iniciales y otras propiedades CSS.
2. Compatible con varios elementos:
   • Funciona con elementos de bloque como párrafos (<p>), encabezados (<h1>, <h2>, etc.), listas (<ul>, <ol>), bloques de cotización (<blockquote>) y otros.

SINTAXIS DE ::first-letter:

Se utiliza la siguiente sintaxis para seleccionar y aplicar estilos a la primera letra:

elemento::first-letter {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades aplicables a :first-letter:

No todas las propiedades CSS pueden ser aplicadas al pseudoelemento ::first-letter. Las propiedades que sí se pueden usar incluyen:

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align
• text-transform
• line-height
• float
• clear

EJEMPLO USANDO :first-letter:

Supongamos que tenemos el siguiente HTML:

<p class="styled-paragraph">
        Este es un párrafo de ejemplo. La primera letra de este párrafo se ha estilizado utilizando el pseudoelemento ::first-letter en CSS. Esto puede ser útil para crear efectos de capitulares en textos largos.
</p>Lenguaje del código: HTML, XML (xml)

Aplicamos el siguiente CSS con pseudoelemento:

.styled-paragraph::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: red;
    float: left;
    line-height: 1;
    margin-right: 10px;
    padding: 5px;
    background-color: yellow;
    border: 1px solid black;
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crea un párrafo con la clase styled-paragraph.
• CSS: Pseudoelemento ::first-letter que aplica cambios de estilo a la primera letra del párrafo.
  • font-size: Aumenta el tamaño de la fuente de la primera letra a 3em.
  • font-weight: Aplica un estilo de fuente en negrita a la primera letra.
  • color: Cambia el color de la primera letra a rojo.
  • float: Hace que la primera letra flote a la izquierda, permitiendo que el texto fluya alrededor de ella.
  • line-height: Establece la altura de línea para la primera letra.
  • margin-right: Añade un margen derecho para separar la primera letra del resto del texto.
  • padding: Añade un relleno alrededor de la primera letra.
  • background-color: Establece un color de fondo amarillo para la primera letra.
  • border: Añade un borde negro alrededor de la primera letra.

Resultado visual:

Aplicaciones comunes usando ::first-letter:

• Destacar inicios de párrafos: Enfatizar el inicio de cada párrafo con una primera letra más grande o llamativa.
• Crear letras capitales: Dar un estilo de mayúsculas iniciales decorativas a la primera letra.
• Mejorar la legibilidad: Aumentar la legibilidad al separar visualmente la primera letra.
• Efectos decorativos: Agregar líneas decorativas o bordes a la primera letra.
• Combinar con ::first-line: Aplicar estilos a la primera letra y la primera línea para un efecto más completo.

3.4. ::selection

El pseudoelemento ::selection te permite personalizar la apariencia del texto seleccionado por el usuario en tu página web. Esto incluye el color de fondo, el color del texto, la sombra de texto y otros estilos visuales.

Características principales de ::selection:

1. Aplica estilos al texto seleccionado:
   • Afecta únicamente al texto que el usuario ha resaltado con el mouse o el trackpad.
2. Compatible con varios elementos:
   • Funciona con elementos como párrafos (<p>), encabezados (<h1>, <h2>, etc.), listas (<ul>, <ol>), bloques de cotización (<blockquote>) y otros elementos que contengan texto.

SINTAXIS DE ::selection:

Se utiliza la siguiente sintaxis para seleccionar y aplicar estilos al texto seleccionado:

::selection {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades aplicables a ::selection:

No todas las propiedades CSS pueden ser aplicadas al pseudoelemento ::selection. Las propiedades que sí se pueden usar incluyen:

• color
• background-color
• text-shadow

EJEMPLO USANDO ::selection:

Supmgamos que tenemos el siguiente párrafo en HTML:

<p class="styled-paragraph">
        Selecciona este texto para ver el efecto del pseudoelemento ::selection. Este texto ha sido estilizado para proporcionar una experiencia de selección personalizada.
</p>Lenguaje del código: HTML, XML (xml)

Y aplicamos el pseudoelemento ::selection:

.styled-paragraph::selection {
    background-color: yellow;
    color: red;
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crea un párrafo con la clase styled-paragraph.
• CSS: Pseudoelemento ::selection:
  • background-color: Establece el color de fondo amarillo para el texto seleccionado.
  • color: Cambia el color del texto seleccionado a rojo.

Resultado visual:

APLICACIONES COMUNES USANDO ::selection:

• Mejorar la legibilidad: Asegurar un contraste adecuado entre el texto seleccionado y el fondo para una mejor lectura.
• Destacar el texto seleccionado: Hacer que el texto seleccionado sea más visible y fácil de identificar.
• Crear una experiencia de usuario más atractiva: Personalizar la apariencia del texto seleccionado para que coincida con el diseño de tu sitio web o aplicación.
• Indicar acciones: Usar colores específicos para indicar diferentes tipos de acciones, como copiar o pegar texto.
• Accesibilidad: Considerar la accesibilidad al elegir los colores de contraste para el texto seleccionado.

3.5. ::placeholder

El pseudoelemento ::placeholder te permite agregar texto de marcador de posición dentro de elementos de formulario como campos de entrada (<input>), áreas de texto (<textarea>) y campos de búsqueda (<input type="search">). Este texto se muestra cuando el campo está vacío, proporcionando una guía visual al usuario sobre lo que se espera que ingrese.

Características principales DE ::placeholder:

1. Visualización contextual:
   • El texto de marcador de posición solo se muestra cuando el campo está vacío y se oculta automáticamente cuando el usuario comienza a escribir.
2. Personalización:
   • Puedes modificar el estilo del texto de marcador de posición con propiedades CSS, como color, font-size, font-weight y text-align.
3. Accesibilidad:
   • El texto de marcador de posición mejora la accesibilidad al proporcionar información contextual a los usuarios, especialmente a aquellos que utilizan lectores de pantalla.

SINTAXIS DE ::placeholder:

Se utiliza la siguiente sintaxis para seleccionar y aplicar estilos al texto de marcador de posición:

elemento::placeholder {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades Aplicables de ::placeholder:

Las propiedades CSS que se pueden aplicar al pseudoelemento ::placeholder incluyen:

• color
• font
• font-family
• font-size
• font-style
• font-weight
• letter-spacing
• line-height
• opacity
• text-transform
• text-shadow

EJEMPLOS USANDO ::placeholder:

Tenemos el siguiente HTML para un campo de entrada y área de texto:

<form>
        <input type="text" placeholder="Introduce tu nombre" class="styled-input">
        <textarea placeholder="Escribe tu mensaje aquí..." class="styled-textarea"></textarea>
</form>Lenguaje del código: HTML, XML (xml)

Y aplicamos estos pseudoelementos en CSS:

.styled-input::placeholder,
.styled-textarea::placeholder {
    color: gray;
    font-style: italic;
    opacity: 0.7;
    font-size: 1em;
}

.styled-input,
.styled-textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    font-size: 1em;
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crean un campo de entrada (<input>) y un área de texto (<textarea>) con marcadores de posición y una clase común (styled-input y styled-textarea).
• CSS: Pseudoelemento ::placeholder:
  • color: Establece el color del texto del marcador de posición a gris.
  • font-style: Aplica un estilo de fuente en cursiva al texto del marcador de posición.
  • opacity: Establece la opacidad del texto del marcador de posición a 0.7.
  • font-size: Establece el tamaño de la fuente del texto del marcador de posición.

Resultado visual:

APLICACIONES COMUNES DE ::placeholder:

• Guías para el usuario: Proporcionar instrucciones claras sobre el tipo de información que se espera en cada campo de formulario.
• Mejora de la experiencia de usuario: Hacer que los formularios sean más fáciles de usar y comprensibles para los usuarios.
• Diseño visual: Agregar un toque de estilo a los formularios y hacerlos más atractivos.
• Accesibilidad: Mejorar la experiencia de los usuarios con discapacidades visuales o cognitivas.
• Soporte para múltiples idiomas: Puedes usar el atributo placeholder para definir texto de marcador de posición en diferentes idiomas.

3.6. ::marker

El pseudoelemento ::marker es una herramienta relativamente nueva en CSS (introducida en la especificación CSS3) que permite personalizar los marcadores de los elementos de lista (<ul>, <ol>). Los marcadores son los símbolos que aparecen al principio de cada elemento de la lista, como viñetas, números o letras.

Características principales de ::marker:

1. Personalización de marcadores:
   • Puedes modificar la apariencia de los marcadores con propiedades CSS, como content, color, font-size, background-color, text-shadow y otras.
2. Compatibilidad con diferentes tipos de listas:
   • Funciona con listas no ordenadas (<ul>) y ordenadas (<ol>), así como con listas anidadas.
3. Mayor flexibilidad:
   • Permite crear marcadores más creativos y personalizados que los marcadores predeterminados del navegador.

SINTAXIS DE ::marker::

Se utiliza la siguiente sintaxis para seleccionar y aplicar estilos a los marcadores:

elemento::marker {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades Aplicables A ::marker:

Las propiedades CSS que se pueden aplicar al pseudoelemento ::marker incluyen:

• color
• font
• font-family
• font-size
• font-weight
• content
• text-transform
• background
• padding
• margin

EJEMPLOS USANDO ::marker:

Supongamos que tenemos la siguiente lista HTML:

 <ul class="styled-list">
        <li>Elemento de lista 1</li>
        <li>Elemento de lista 2</li>
        <li>Elemento de lista 3</li>
 </ul>Lenguaje del código: HTML, XML (xml)

Y aplicamos el siguiente ::marker:

.styled-list li::marker {
    color: red;
    font-size: 1.5em;
    font-weight: bold;
    content: "★"; /* Cambia el marcador a una estrella */
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crea una lista no ordenada (<ul>) con la clase styled-list y tres elementos de lista (<li>).
• CSS: Pseudoelemento ::marker:
  • color: Cambia el color del marcador a rojo.
  • font-size: Aumenta el tamaño de la fuente del marcador.
  • font-weight: Aplica un estilo de fuente en negrita al marcador.
  • content: Cambia el marcador a una estrella (★) en lugar del punto predeterminado.

Resultado visual:

APLICACIONES COMUNES DE ::marker:

• Diseños de listas personalizados: Crear listas con marcadores únicos que coincidan con el estilo de tu sitio web o aplicación.
• Mejorar la legibilidad: Usar marcadores más visibles para facilitar la lectura de las listas.
• Indicar jerarquías: Diferenciar entre sublistas y listas principales mediante distintos tipos de marcadores.
• Agregar íconos: Usar íconos en lugar de los marcadores predeterminados para representar diferentes categorías o elementos.
• Accesibilidad: Considerar el uso de colores y símbolos que sean accesibles para usuarios con discapacidades visuales.

3.7. ::backdrop

El pseudoelemento ::backdrop en CSS se utiliza para aplicar estilos a la capa de fondo (backdrop) de los elementos de interfaz de usuario que generan una superposición modal, como los cuadros de diálogo (<dialog>) y los elementos en pantalla completa (fullscreen).

Esto permite personalizar la apariencia del fondo detrás de estos elementos, mejorando la experiencia del usuario y la estética del sitio web.

Características principales de ::backdrop:

1. Personalización del fondo:
   • Puedes modificar el color, la imagen, el degradado o cualquier otro aspecto del fondo del modo de pantalla completa.
2. Efectos visuales:
   • Puedes agregar efectos como desenfoque, transparencia o sombras para mejorar la experiencia visual.
3. Control de la visibilidad:
   • Puedes mostrar u ocultar el fondo según tus necesidades o preferencias.

SINTAXIS DE ::backdrop::

Se utiliza la siguiente sintaxis para seleccionar y aplicar estilos al fondo:

elemento::backdrop {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades Aplicables de ::backdrop:

Las propiedades CSS que se pueden aplicar al pseudoelemento ::backdrop incluyen:

• background
• background-color
• background-image
• background-size
• background-repeat
• background-position
• filter
• opacity

EJEMPLOS USANDO ::backdrop:

Primero usamos HTML para crea un botón para abrir un cuadro de diálogo modal (<dialog>) y un botón dentro del diálogo para cerrarlo.

    <button id="openDialog">Abrir Diálogo</button>
    <dialog id="myDialog">
        <p>Este es un cuadro de diálogo modal.</p>
        <button id="closeDialog">Cerrar</button>
    </dialog>Lenguaje del código: HTML, XML (xml)

Segundo aplicamos JavaScript que añade interactividad para abrir y cerrar el cuadro de diálogo modal.

JavaScript

    <script>
        const dialog = document.getElementById('myDialog');
        const openBtn = document.getElementById('openDialog');
        const closeBtn = document.getElementById('closeDialog');

        openBtn.addEventListener('click', () => {
            dialog.showModal();
        });

        closeBtn.addEventListener('click', () => {
            dialog.close();
        });
    </script>Lenguaje del código: HTML, XML (xml)

Tercero usamos CSS con ::backdrop:

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semitransparente */
    backdrop-filter: blur(5px); /* Desenfoque de fondo */
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

• HTML: Se crea un botón para abrir un cuadro de diálogo modal (<dialog>) y un botón dentro del diálogo para cerrarlo.
• JavaScript: Se añade interactividad para abrir y cerrar el cuadro de diálogo modal.
• CSS: Pseudoelemento ::backdrop:
  • background-color: Establece un color de fondo negro semitransparente para la capa de fondo del cuadro de diálogo.
  • backdrop-filter: Aplica un filtro de desenfoque al fondo.

Resultado visual:

Este es el resultado visual (estilos) que genera el pseudoelemento ::backdrop cuando se hace clic en el botón aplicado en el HTML

APLICACIONES COMUNES USANDO ::backdrop:

• Visualizar videos en pantalla completa: Crear una experiencia más inmersiva para ver videos en línea.
• Jugar videojuegos: Mejorar la experiencia visual al jugar juegos en línea.
• Mostrar presentaciones a pantalla completa: Crear un entorno más enfocado para presentaciones o conferencias.
• Aplicaciones de realidad virtual: Desarrollar interfaces más atractivas para aplicaciones de realidad virtual.
• Efectos especiales: Agregar efectos especiales a elementos que se abren en pantalla completa.

3.8. ::cue

El pseudoelemento ::cue en CSS se utiliza para aplicar estilos a las pistas de texto de los elementos de medios, como los subtítulos o las descripciones en un <track> dentro de un <video> o <audio>.

Esto permite personalizar la apariencia de los subtítulos, mejorando la experiencia de usuario y la accesibilidad del contenido multimedia.

SINTAXIS DE ::cue:

elemento::cue {
  propiedades-CSS;
}Lenguaje del código: PHP (php)

Propiedades Aplicables A ::cue:

Las propiedades CSS que se pueden aplicar al pseudoelemento ::cue incluyen:

• color
• background
• font
• font-family
• font-size
• font-style
• font-weight
• text-align
• text-shadow
• line-height

EJEMPLOS USANDO ::cue:

Primero usamos un HTML para agregar un video:

    <video controls width="600">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <track kind="subtitles" src="https://www.w3schools.com/html/mov_bbb_subtitles.vtt" srclang="en" label="English" default>
    </video>Lenguaje del código: HTML, XML (xml)

Ahora aplicamos CSS con ::cue:

video::cue {
    color: yellow;
    background: rgba(0, 0, 0, 0.8);
    font-size: 1.2em;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
    padding: 5px;
    border-radius: 5px;
}Lenguaje del código: CSS (css)

Explicación del ejemplo:

1. HTML:
   • Se incluye un elemento <video> con un archivo de video (mov_bbb.mp4) y una pista de subtítulos (mov_bbb_subtitles.vtt).
   • El video tiene controles habilitados (controls) y se define un ancho de 600 píxeles (width="600").
   • El archivo de subtítulos está en formato WebVTT y se configura como la pista de subtítulos predeterminada.
2. CSS:
   • Se aplica el pseudoelemento ::cue al elemento <video>.
   • Los subtítulos tienen el texto en color amarillo (color: yellow).
   • El fondo de los subtítulos es negro semitransparente (background: rgba(0, 0, 0, 0.8)).
   • El tamaño de la fuente es 1.2em (font-size: 1.2em).
   • La fuente utilizada es Arial (font-family: Arial, sans-serif).
   • Se aplica una sombra al texto (text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)).
   • La altura de la línea se ajusta a 1.5 (line-height: 1.5).
   • Se añade relleno alrededor del texto de los subtítulos (padding: 5px).
   • Se redondean las esquinas del fondo de los subtítulos (border-radius: 5px).

Resultados visual:

Cuando se abra la página en el navegador y se reproduzca el video, verás que los subtítulos tienen un fondo negro semitransparente, texto amarillo con sombra, y una apariencia estilizada según los estilos definidos.

APLICACIONES COMUNES USANDO ::cue: :

• Estilo de subtítulos: personalice la apariencia de los subtítulos para mejorar su legibilidad y accesibilidad.
• Mejorar los subtítulos: mejore la visibilidad y el estilo de los subtítulos para que coincidan con sus preferencias de diseño.
• Cree pistas de texto alternativas: proporcione descripciones de texto alternativas para elementos no visuales como imágenes o videos.
• Sincronizar texto con audio: alinee las señales de texto con los segmentos de audio correspondientes en la reproducción multimedia.
• Agregue efectos visuales: aplique efectos como sombras paralelas o contornos para resaltar señales importantes.

4. Ejemplo completo usando pseudoelementos CSS más comunes.

A continuación dejamos un ejemplo usando varios de los pseudoelemtnos mas comunes visto en este artículo.

Primero re dejamos el HTML con los pseudoelementos CSS y su resultado visual y luego te explicamos el ejemplo:

ESTRUCTURA HTML:

<article>
     <h1>Example Article</h1>
     <p>
         This is an example paragraph. It will demonstrate various pseudoelements. 
         Notice how the first line and first letter are styled differently.
     </p>
     <ul>
         <li>First item</li>
         <li>Second item</li>
         <li>Third item</li>
     </ul>
 </article>
 <form>
     <label for="name">Name:</label>
     <input type="text" id="name" placeholder="Enter your name">
 </form>Lenguaje del código: HTML, XML (xml)

ESTRUCTURA CSS CON PSEUDOELEMENTOS:

article h1::before {
    content: "📄 ";
    font-size: 1.5em;
}

article h1::after {
    content: " ✨";
    font-size: 1.5em;
}

article p::first-line {
    font-weight: bold;
    color: blue;
}

article p::first-letter {
    font-size: 2em;
    color: red;
    float: left;
    margin-right: 0.1em;
}

::selection {
    background: yellow;
    color: black;
}

input::placeholder {
    color: gray;
    font-style: italic;
}

ul li::marker {
    color: green;
    font-size: 1.5em;
}

::backdrop {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}Lenguaje del código: CSS (css)

AHORA COPIA Y PEGA EL HTML Y CSS EN LOS ESPACIOS CORRESPONDIENTES EN EL SIGUIENTE BLOQUE:

Explicación del ejemplo:

::before y ::after:

• Estos pseudoelementos se usan para insertar contenido antes y después del contenido de un elemento respectivamente.
• En el ejemplo, se usa ::before para añadir un icono de documento 📄 antes del título (<h1>) y ::after para añadir un icono de brillo ✨ después del título.

article h1::before {
    content: "📄 ";
    font-size: 1.5em;
}
article h1::after {
    content: " ✨";
    font-size: 1.5em;
}Lenguaje del código: CSS (css)

::first-line:

• Este pseudoelemento aplica estilos a la primera línea del contenido de un elemento de bloque.
• En el ejemplo, la primera línea del párrafo (<p>) se estiliza para que sea negrita y azul.

article p::first-line {
    font-weight: bold;
    color: blue;
}Lenguaje del código: CSS (css)

::first-letter:

• Este pseudoelemento aplica estilos a la primera letra del contenido de un elemento de bloque.
• En el ejemplo, la primera letra del párrafo se hace más grande, de color rojo, y se flota a la izquierda con un margen a la derecha.

article p::first-letter {
    font-size: 2em;
    color: red;
    float: left;
    margin-right: 0.1em;
}Lenguaje del código: CSS (css)

::selection:

• Este pseudoelemento estiliza el contenido que es seleccionado por el usuario.
• En el ejemplo, el contenido seleccionado tendrá un fondo amarillo y el texto será negro.

::selection {
    background: yellow;
    color: black;
}Lenguaje del código: CSS (css)

::placeholder:

• Este pseudoelemento estiliza el texto de marcador de posición dentro de los elementos <input>.
• En el ejemplo, el texto de marcador de posición es gris y en cursiva.

input::placeholder {
    color: gray;
    font-style: italic;
}Lenguaje del código: CSS (css)

::marker:

• Este pseudoelemento estiliza los marcadores de los elementos de lista (<li>).
• En el ejemplo, los marcadores son verdes y más grandes.

ul li::marker {
    color: green;
    font-size: 1.5em;
}Lenguaje del código: CSS (css)

CONCLUSIÓN: Este ejemplo cubre varios pseudoelementos y muestra cómo aplicarlos para estilizar diferentes partes y estados de los elementos en una página web. Cada pseudoelemento tiene un propósito específico y puede ser utilizado para mejorar la presentación y la interactividad del contenido web.

5. ¿Cómo usar pseudoelemtos CSS? paso a paso.

1. Identificar el Elemento a Estilizar
   • Descripción: Decide sobre qué elemento de tu HTML deseas aplicar el pseudoelemento. Puede ser un párrafo, un enlace, un título, etc.
   • Ejemplo: <p class="example">Texto de ejemplo.</p>
2. Seleccionar el Pseudoelemento Adecuado
   • Descripción: Elige el pseudoelemento que mejor se ajuste a la parte del contenido que deseas estilizar o modificar.
   • Ejemplo: ::before, ::after, ::first-line, ::first-letter, ::selection, ::placeholder, ::marker, ::backdrop, ::cue.
3. Escribir el Selector en CSS
   • Descripción: Utiliza la sintaxis correcta para el pseudoelemento. Generalmente, esto implica el uso de dos puntos dobles :: seguido del nombre del pseudoelemento.
4. Definir los Estilos en CSS
   • Descripción: Añade las propiedades y valores CSS dentro del bloque del selector para definir cómo debería verse el pseudoelemento.
5. Probar y Ajustar los Estilos
   • Descripción: Visualiza tu página en el navegador para ver los efectos del pseudoelemento y ajusta los estilos según sea necesario.
   • Consejo: Usa las herramientas de desarrollo del navegador (como Chrome DevTools) para inspeccionar y modificar estilos en tiempo real.

6. Consejos para optimizar pseudoelementos.

1. Minimizar el Uso de Pseudoelementos:
   • Usa pseudoelementos solo cuando sea necesario. Aunque son poderosos para estilizar y agregar contenido, el uso excesivo puede afectar el rendimiento, especialmente en páginas con muchos elementos.
2. Evitar Pseudoelementos Anidados:
   • Evita el uso excesivo de pseudoelementos anidados. Cada pseudoelemento agrega una capa adicional de estilo que el navegador debe renderizar, lo que puede aumentar el tiempo de procesamiento.
3. Optimizar Selectores:
   • Usa selectores CSS eficientes. Selectores complejos y largos pueden ralentizar el renderizado de la página. Prefiere selectores más específicos y cortos.
4. Limitar el Uso de Propiedades Pesadas:
   • Algunas propiedades CSS son más costosas en términos de rendimiento que otras. Por ejemplo, propiedades como box-shadow, text-shadow, y filters pueden ser costosas de renderizar. Úsalas con moderación en pseudoelementos.
5. Evitar el Uso de Imágenes Grandes en ::before y ::after:
   • Si usas imágenes en pseudoelementos ::before y ::after, asegúrate de que sean optimizadas y de tamaño adecuado. Imágenes grandes pueden ralentizar el tiempo de carga de la página.
6. Usar Propiedades CSS que Permitan la Aceleración por GPU:
   • Algunas propiedades CSS pueden beneficiarse de la aceleración por GPU, mejorando el rendimiento. Propiedades como transform y opacity son ejemplos de esto.
7. Prevenir el Reflujo y el Repaint:
   • Los pseudoelementos pueden desencadenar reflujo (reflow) y repintado (repaint) del layout, que son operaciones costosas. Minimiza cambios en el DOM que afecten estas propiedades para evitar el reflujo.
8. Usar will-change con Cuidado:
   • La propiedad will-change puede ayudar a optimizar elementos que cambian frecuentemente, pero su uso excesivo puede aumentar el uso de memoria y perjudicar el rendimiento. Úsala únicamente en los elementos que realmente lo necesiten.
9. Evitar el Uso de Pseudoelementos en Elementos Masivos:
   • Evita aplicar pseudoelementos en elementos que se repiten masivamente, como listas grandes o tablas. Esto puede añadir una carga significativa al renderizado de la página.
10. Monitorizar y Analizar el Rendimiento:
    • Usa herramientas de desarrollo de navegadores (como Chrome DevTools) para monitorizar el rendimiento de la página. Estas herramientas pueden ayudarte a identificar y resolver problemas de rendimiento causados por pseudoelementos.

7. ¿Cuál es la diferencia entre pseudoelementos y pseudoclases en CSS?.

Característica	Pseudoclases	Pseudoelementos
Propósito	Estilizar estados o condiciones especiales de los elementos existentes	Estilizar partes específicas del contenido de un elemento
Sintaxis	:pseudoclase	::pseudoelemento
Modifica el DOM	No	No, pero puede añadir contenido ficticio visible
Ejemplos	:hover, :focus, :nth-child(n)	::before, ::after, ::first-line
Compatibilidad	Amplia, también con un solo :	Usar :: es la norma, pero algunos aceptan un solo : para compatibilidad con versiones anteriores
Uso Común	Estados de interacción del usuario, orden de los hijos	Añadir contenido decorativo, estilizar partes específicas del texto

8. Preguntas frecuentes y resumen sobre pseudoelementos CSS