Pseudoelementos CSS: guía detallada para principiantes (2022)

Los pseudoelementos son una parte interesante de CSS. Te permiten hacer muchos pequeños ajustes a tu diseño. Sin embargo, al principio pueden resultar confusos, especialmente para los principiantes.

Por eso, en esta entrada del blog queremos hablar de ellos en detalle. A continuación, te daremos una guía para principiantes sobre pseudoelementos CSS. Te explicaremos qué son, cómo funcionan y para qué puedes usarlos. La entrada concluirá con ejemplos de cómo usar los pseudoelementos más comunes.

Al final, queremos que te sientas empoderado y capaz de hacerlos parte de tu repertorio CSS.

¿Qué son los pseudoelementos CSS?

Para explicar qué son los pseudoelementos, lo mejor es empezar con un ejemplo. Aquí hay una página HTML muy simple con un enlace a una hoja de estilo y un único elemento de párrafo en ella.

!DOCTYPE htmlhtmlheadlink rel="stylesheet" href="style.css"/headbodypCSS pseudo-element test/p/body/html

Sin embargo, cuando miramos la página en un navegador, aparece así:

Probablemente notarás la flecha que aparece delante del párrafo aunque no esté presente en el documento HTML. Esto se debe a que la hoja de estilo vinculada contiene el siguiente marcado:

p::before {content: "→ ";}

Arriba hay un selector CSS de aspecto bastante estándar. Sin embargo, lo que se destaca son los dos puntos más beforedetrás. Ese es nuestro pseudoelemento.

En este caso, hace algo muy simple: agrega un elemento delante del HTML interno del selector de destino y coloca el contenido definido en su valor. En este caso, se trata de una flecha y el elemento de destino es cada elemento de párrafo de la página.

Lo interesante, sin embargo, es que la flecha no aparece en el HTML en sí. En su lugar, solo se ve un pseudoelemento y se puede comprobar su contenido. Así es como se ve en las herramientas para desarrolladores del navegador:

Esta tendencia a comportarse como elementos sin serlo es la razón por la que los pseudoelementos reciben su nombre. También influye en su comportamiento, como veremos en los ejemplos siguientes.

Por ahora, solo necesito familiarizarme con el marcado básico para usar pseudoelementos:

selector::pseudo-element {property: value;}

Entraremos en más detalles a continuación.

Pseudoelementos disponibles

Además del elemento mencionado anteriormente ::before, el otro pseudoelemento más popular es ::after. Como sugiere su nombre, hace lo mismo que , ::beforepero en cambio crea elementos secundarios al final de su destino.

Además de estos dos, también existen estos elementos:

• ::backdrop– Crea un cuadro tan grande como la ventana gráfica del usuario que le permite diseñar el fondo de cualquier elemento que esté en pantalla completa, como videos.
• ::cue– Puedes usar esto para diseñar señales WebVTT, es decir, cosas como subtítulos y leyendas dentro de los videos.
• ::first-letter– Se dirige a la primera letra de la primera línea de un elemento a nivel de bloque (por ejemplo p, , h2, div). Esto también puede significar dentro de un ::beforeelemento.
• ::first-line– Igual que ::first-letterpero apuntando a toda la primera línea de un elemento de bloque.
• ::file-selector-button– Crea un botón de un inputelemento de type="file".
• ::marker– Le permite aplicar estilo a los marcadores de los elementos de la lista, como en listas con viñetas o numeradas.
• ::part()– Permite seleccionar elementos HTML específicos dentro de un árbol de sombras marcado con "part="un nombre. Los elementos del árbol de sombras se agregan mediante JavaScript. Más informaciónaquí.
• ::placeholder– Use esto para darle estilo al texto del marcador de posición dentro inputde textarealos elementos.
• ::selection– Un pseudo elemento CSS que puedes usar para aplicar estilo al texto resaltado por los usuarios (por ejemplo, haciendo clic y arrastrando el cursor).
• ::slotted()– Apunta a los elementos marcados con slotpara darle estilo.

Pseudoelementos experimentales

Además de eso, hay algunos pseudoelementos que aún no son totalmente compatibles con los navegadores (o, en algunos casos, no son compatibles en absoluto):

• ::cue-region– También para diseñar subtítulos y leyendas, pero los tiene en cuenta a todos como una sola unidad y no individualmente.
• ::grammar-error– Marca el texto que un navegador ha identificado como gramaticalmente incorrecto de una manera específica. Actualmente no es compatible con ningún navegador.
• ::spelling-error– Similar a ::grammar-error, pero con errores ortográficos. Actualmente, ningún navegador lo admite.
• ::target-text– Permite aplicar estilo al texto al que se desplaza el navegador mediante saltos de enlaces. La compatibilidad con navegadores aún es un poco irregular en este momento.

También suelen aparecer nuevos elementos, así que mantente actualizado.Nuevas características CSS.

Pseudoelementos vs. pseudoclases

Algo que puede encontrar al investigar este tema son las pseudoclases. No son lo mismo que los pseudoelementos CSS, aunque algunas de ellas hacen cosas similares.

La pseudoclase más conocida es probablemente :hover. Permite cambiar el estilo de un elemento dependiendo de si el usuario pasa el cursor del ratón sobre él.

a:hover {color: #28303d;text-decoration-style: dotted;}

Y esa es también la principal diferencia entre pseudoclases y elementos. Las clases apuntan a elementos existentes en un estado determinado y te dan posibilidades similares a las que tendrías si hubieras añadido unaclase HTML personalizadaLos pseudoelementos, por otro lado, actúan como si hubieran agregado elementos HTML completamente nuevos al marcado.

Las diferencias a veces son un poco confusas, especialmente con algo como ::first-liney ::first-letter, y también porque puedes usarlos juntos.

p:hover::before {content: "→";}

Sin embargo, es fácil dominarlo una vez que los hayas usado unas cuantas veces.

En general, puedes reconocer las pseudoclases por un solo dos puntos al principio, mientras que los pseudoelementos tienen dos puntos dobles. Sin embargo, ten en cuenta que los primeros pseudoelementos ( :before, :after, :first-letter, :first-line) también funcionan con un solo dos puntos porque ese era el marcado en la especificación CSS anterior.

Ejemplos de cómo utilizar pseudoelementos CSS

Después de cubrir la teoría, a continuación, queremos repasar una serie de ejemplos sobre cómo utilizar los pseudoelementos más comunes. Sin embargo, primero, algunas reglas generales importantes.

En primer lugar, solo se puede utilizar un pseudoelemento por selector. Si se quieren aplicar varios de ellos al mismo selector, hay que utilizar declaraciones independientes:

p::before {content: "→";}p::first-line {color: red;font-size: 130%;}

En segundo lugar, utilice dos puntos ( ::) en lugar de dos puntos simples ( :) para declarar pseudoelementos. Esto ayuda a distinguirlos de las pseudoclases. Como se mencionó, la mayoría de los navegadores admiten ambas sintaxis para los pseudoelementos originales, pero, para escribir CSS moderno y adecuado, debe cumplir con la regla de los dos puntos.

::antes y ::después

Comencemos con los dos más fáciles. Los pseudoelementos ::beforey solo funcionan con elementos que aceptan elementos secundarios, es decir, que pueden contener otros componentes HTML.::after

Por ejemplo, img, video, y inputno aceptan pseudoelementos (una expectativa es input[type=”checkbox”]). Las aplicaciones típicas son elementos de bloque como divs,encabezados, párrafos o listas.

Además, ::beforey ::aftersolo se muestran si defines su contentpropiedad. Incluso puede estar vacía ( content: "";), pero debes definirla de todas formas. contenttoma una cadena (es decir, texto) o un enlace a una imagen que quieres que aparezca en ese lugar.

Generalmente se usan para estilizar. Aquí hay un ejemplo típico ::beforedeTema Veintiuno:

.wp-block-pullquote blockquote::before {color: currentColor;content: "“";display: block;position: relative;left: 0;font-size: 3rem;font-weight: 500;line-height: 1;}

Esta parte es responsable de mostrar las comillas cuando se ingresa un bloque de cita.

CSS-Tricks también tiene unejemploque coloca comillas tanto antes como después de la cita utilizando pseudoelementos. También te enseñan a usar las propiedades open-quote, close-quotepara ganar puntos extra.

Una aplicación popular ::afteres su uso para borrar flotantes. En caso de que no sepas lo que significa, es una forma de asegurarse de que los elementos a los que se floatles aplica la propiedad permanezcan dentro de su contenedor.

divdiv/divdiv/divdiv/div/div

Para lograrlo en el ejemplo anterior, puedes utilizar el siguiente marcado CSS:

.container::after {clear: both;content: "";display: block;}

Compatibilidad con navegadoresPara estos dos pseudoelementos CSS es excelente:

::primera letra

El siguiente es ::first-letter. Aquí, lo primero es que solo funciona en contenedores de bloques, nada que esté configurado como display: inline;. También debes tener cuidado, ya que también apuntará a la puntuación, símbolos como dígrafos como la primera letra o cualquier cosa que esté contenida en ::before.

Las propiedades disponibles para ::first-letterson las de fuentes, color, background, margin, padding, border, text-decoration, vertical-align(pero solo si floatestá establecido en none), text-transform, line-height, floaty clear.

Un ejemplo clásico en este caso es utilizarlo para letras capitales:

p::first-letter {color: grey;font-family: Tahoma;font-size: 160%;}

Así es como se ve el marcado anterior cuando se aplica a un texto de ejemplo:

Finalmente,compatibilidad del navegadorpara ::first-letter es genial:

::primera linea

Ya mencionamos que esto es muy similar a lo anterior, pero para la primera línea de texto dentro de un elemento. También debes tener en cuenta que solo funciona con elementos que tienen un displayvalor de block, inline-block, list-item, table-captiono table-cell. Las propiedades aplicables son similares a ::first-lettercon la adición de word-spacing, y letter-spacing.

Aquí está el mismo ejemplo que el anterior pero usando ::first-line:

p::first-line {color: grey;font-family: Tahoma;font-size: 160%;}

Y así es como se ve:

::first-linees tambiénaceptado por prácticamente todos los navegadoresen existencia

::marcador

Este pseudoelemento CSS existe específicamente para diseñar marcadores de lista, y para eso lo usaremos.

Tienes dos opciones básicas: introducir tus propios marcadores o darle estilo a los que vienen por defecto en HTML/CSS como viñetas y números. Para lograrlo tienes acceso a las propiedades color, content, white-space, font, animation, transitiony algunas más.

Así es como se ve:

ul li::marker {content: "?";}

Como puedes imaginar, eso simplemente reemplaza el marcador de lista con el emoji en cuestión:

Sin embargo, también puedes utilizar tus propias imágenes personalizadas:

ul li::marker {content: url("wordpress-logo.png");}

En este caso, utilizamos el logotipo de WordPress:

El estilo de los marcadores existentes funciona de la misma manera que cabría esperar. Puede cambiar su color, cambiar el tamaño mediante el tamaño de fuente, etc.

Compatibilidad del navegadorporque esto es genial aunque no sea tan amplio como para otros elementos de esta lista.

::marcador de posición

Al igual que su predecesor, este es un pseudoelemento de propósito único. Solo se puede utilizar para dar estilo al texto del marcador de posición dentro inputde textarealos elementos. Debido a esa limitación, solo acepta algunas propiedades. Básicamente, todas las que tienen que ver con el estilo del texto más las propiedades de fondo.

A continuación se muestra un ejemplo de cómo se ve. Primero, el HTML:

divinput placeholder="Enter your name..."input placeholder="Enter your email address..."/div

Después de eso, puedes usar el marcado CSS de la siguiente manera:

div input::placeholder {background-color: #578ee6;color: #000;font-family: 'Brush Script MT', cursive;font-style: italic;text-align: center;}

Cuando lo hagas, así es como se verá en la página (lo sé, no es muy bonito):

Y eso es todo. Lo único que queda es mirar elcompatibilidad del navegador de ::placeholder, lo cual es muy bueno.

::selección

Nuestro último ejemplo de pseudoelementos CSS se refiere a ::selection. Dado que se trata de aplicar estilo al texto cuando lo marca el usuario, acepta propiedades CSS típicas para este tipo de trabajo. Piense en color, background-color, text-decoration, text-shadow, etc.

Por ejemplo, así es como podemos darle estilo a un párrafo HTML simple:

p::selection {color: #bae64c;background-color: #e63c25;}

Al final queda así:

También puedes combinar esto con otros selectores, por ejemplo, para aplicar estilo a diferentes partes del texto por separado cuando se seleccionan:

p.second-paragraph::selection {background-color: #578ee6;}

Si asigna la clase personalizada .second-paragraphal segundo párrafo (gracias, Capitán Obvio), obtendrá este resultado.

::selectiones tambiénBien tolerado por los navegadores:

Resumen: pseudoelementos CSS

Los pseudoelementos CSS son una característica interesante. Como puedes ver arriba, muchos de ellos son muy útiles para agregar pequeños toques a tu sitio.Diseño webEsto puede hacer que pase de ser excelente a extraordinario. Además, algunos de ellos tienen un papel más funcional, como la capacidad de ::afterlimpiar flotadores.

Los pseudoelementos no son necesariamente lo primero que debes aprender en CSS, ya que su objetivo es darle un toque extra a tu sitio web. Sin embargo, definitivamente debes conocerlos, especialmente porque cada vez aparecen más.

Además, como esperamos haber demostrado, su uso es bastante sencillo, por lo que podrás aprenderlos rápidamente.

¿Cuál es tu uso favorito para las pseudoclases CSS? ¡Comparte tu opinión en los comentarios!