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

Los pseudoelementos son una parte interesante de CSS. Le permiten hacer muchos pequeños cambios en su diseño. Sin embargo, especialmente los principiantes podrían confundirse al principio. Por esta razón, en esta publicación de blog, queremos hablar sobre ellos en detalle. A continuación, le daremos una guía para principiantes para pseudoelementos CSS. Explicaremos qué son, cómo funciona y para lo que puede usar. La publicación terminará con ejemplos de uso de los pseudo elementos más comunes. Finalmente, queremos sentirnos empoderados y capaces de ser parte de su repertorio CSS.
¿Cuáles son los pseudoelementos CSS? Para explicar qué pseudoelementos son, es mejor comenzar con un ejemplo. Aquí hay una página HTML muy simple, con un enlace a una hoja de estilo y un solo elemento de párrafo. * /Html> Sin embargo, cuando miramos la página en un navegador, sale:

Probablemente notará la flecha frente al párrafo que aparece incluso si no está presente en el documento HTML. Esto se debe al hecho de que la hoja de estilo contiene la siguiente marca:
P :: antes {contenido: “→”; } Arriba es un selector CSS estándar. Sin embargo, lo que sale de lo más destacado son los pitidos dobles dobles traseros. Este es nuestro pseudo-elemento. En este caso, hace algo muy simple, agrega un elemento frente al HTML interior del selector de destino y coloca el contenido definido en su valor. En este caso, esta es una flecha, y el elemento dirigido es cada elemento de párrafo en la página. Lo interesante, sin embargo, es que la flecha no aparece en HTML en sí. En cambio, solo ve un elemento pseudo y puede verificar su contenido. Así es como se ven las herramientas de los desarrolladores del navegador: esta tendencia a comportarse como elementos sin ser el camino es cómo los pseudoelementos toman su nombre. También tiene una cierta influencia en su comportamiento, como veremos en los ejemplos a continuación. Por el momento, solo tiene que familiarizarse con el marcado básico para el uso de pseudo-elementos: selector :: pseudo-elemento {propiedad: valor; } Entraremos en más detalles a continuación. Pseudo-Elementos disponibles cerca del elemento :: Antes mencionado anteriormente, el otro elemento pseudo más popular es :: después. Como su nombre indica, hace las mismas cosas que :: antes, pero en su lugar crea niños al final de su objetivo.

Además de los dos, están los siguientes elementos:
:: Backdrop: crea una caja que es tan grande como la ventana de visualización del usuario, lo que le permite atar el fondo de cualquier elemento que se transforme en una pantalla completa, como videos.
:: Cue-usted puedes usar esto a elegantes indicaciones de WebVt, es decir, cosas como subtítulos y subtítulos en videos. :: Primer atropetos La primera letra de la primera línea en un nivel de bloque (p. Ej. ). Esto también puede significar dentro de un elemento :: antes.
:: Primera línea-AS: primer tetter, pero se refiere a toda la primera línea de un elemento de bloque.
:: file-selecton-crea un botón de un elemento por tipo = “archivo”.
:: Marker: le permite atar a los anotadores en la lista, como en las listas marcadas o numeradas.
:: Part () – te permite apuntar a ciertos elementos HTML dentro de una sombra con forma de “Parte =” por nombre. JavaScript agregan los elementos del eje de la sombra. Más información aquí.
:: El marcador de posición-usa que estille el texto del sustituyente en los elementos y .
:: Selección-un CSS de pseudo-elemento que puede usar para aplicar el estilo del texto resaltado (por ejemplo, haciendo clic y tirar del cursor).
:: slotted () – se dirige a los elementos marcados con el estilo .
Pseudo-Elementos experimentales Además, hay algunos pseudo elementos que aún no son totalmente aceptados por los navegadores (o, en algunos casos, en absoluto):
:: Cue-recion-también para el estilo de subtítulos y subtítulos, les preocupa a todos como una sola unidad y no individuales.
:: Grammar-OORR marca el texto que un navegador identificó como gramaticalmente incorrecto de una manera específica. Actualmente no es aceptado por ningún navegador.
:: Spelling-Berror-Similar a :: Grammar-Oorr, pero por errores de ortografía. Actualmente, no es aceptado por ningún navegador. :: Target-text-it le permite atar el texto en el que el navegador se ejecuta a través de un enlace. El portador del navegador sigue siendo ligeramente irregular en este momento.
Además, a menudo aparecen nuevos elementos, así que tenga en cuenta las nuevas funciones CSS.
Pseudo Elementos vs clases de pseudo Lo que podría cumplir cuando está investigando este tema son pseudo-clases. No son los mismos que el pseudo -pseudocontratamiento CSS, incluso si algunos de ellos hacen cosas similares. La clase de pseudo más conocida es probablemente: flotante. Le permite cambiar el estilo de un elemento de acuerdo con si el usuario pasa el cursor sobre él con el cursor del mouse. A: Hover {Color: #28303d; Estilo de decoración de texto: punteado; } Y esta es también la principal diferencia entre pseudo-clases y elementos. Las clases se dirigen a elementos existentes en una determinada condición y le brindan posibilidades similares como si le agregaran una clase HTML personalizada. Los pseudoelementos, por otro lado, se comportan como si agregaran elementos HTML completamente nuevos a la marca.
Las diferencias son un poco preocupadas a veces, especialmente con algo como :: Primera línea y :: Prime tetter, y también porque puedes usarlas juntas. P: hover :: antes {contenido: “→”; } Sin embargo, es fácil entenderlo después de usarlos varias veces. En general, puede reconocer las pseudo-clases a través de un solo dos puntos al frente, mientras que los pseudoelementos tienen dos dos puntos. Sin embargo, tenga en cuenta que el hecho de que los pseudo-elementos más antiguos (: antes ,: After ,: Primer ,: Primera línea) también funciona con dos puntos, ya que esta era la marca en la especificación CSS anterior. Uso de pseudoelementos CSS Después de cubrir la teoría, a continuación, queremos repasar muchos ejemplos sobre cómo usar los pseudo elementos más comunes. Primero, sin embargo, algunas reglas generales importantes. En primer lugar, solo puede usar un pseudo-elemento por selector. Si desea aplicar más de ellos el mismo selector, debe usar declaraciones separadas: P :: antes {contenido: “→”; } P :: primera línea {color: rojo; Tamaño de fuente: 130%; } En segundo lugar, use dos puntos dobles (: 🙂 en lugar de dos puntos (:) para declarar elementos de pseudo. Esto les ayuda a distinguirlos de las pseudo-clases. Como mencioné, la mayoría de los navegadores aceptan ambas sintaxis para los pseudo -elementos originales, pero para escribir CSS correcto y moderno, debe seguir dos puntos.
:: antes y después de comenzar con los dos más fáciles. Pseudo-Elements :: Antes y :: After Solo trabaja con elementos que aceptan elementos infantiles, lo que significa que pueden contener otros componentes HTML. Por ejemplo, , y no acepta y, por lo tanto, no acepta pseudo-elementos (una expectativa es [type = “CheckBox”]). Las aplicaciones típicas son elementos de bloque como divs, títulos, párrafos o listas. Además, :: antes y :: después, solo si define su propiedad de contenido. Incluso puede estar vacío (contenido: “”;), pero debe definirlo en cualquier caso. El contenido toma una cadena (es decir, texto) o un enlace a una imagen que desea mostrar en ese lugar. Por lo general, las usas para peluquería. Aquí hay un ejemplo típico de :: antes en los veintiún años: .wp-block-pullquote blockquote :: antes {color: currentColor; Contenido: “” “; Bloqueo de pantalla; Posición: relativo; Izquierda: 0; Tamaño de fuente: 3REM; Font-peso: 500; Línea de altura: 1; } Esta parte es responsable de mostrar citas al ingresar un bloque de citas.
CSS-Truss también tiene un ejemplo que coloca citas tanto en el frente como después de las citas usando pseudo elementos. También le enseña a utilizar las propiedades de cotizaciones cerradas de cita de cita cerrada para puntos de brownie adicionales.
Una aplicación popular para :: después es usarla para limpiar el flotador. Si no sabe lo que esto significa, es una forma de asegurarse de que los elementos que tienen la propiedad flotante aplicada permanecen en su contenedor. !
Para lograr esto para el ejemplo anterior, puede usar la siguiente marca CSS: .Container :: After {Clear: ambos; Contenido: “”; Bloqueo de pantalla; } El soporte del navegador para estos dos elementos Pseudo CSS es excelente ::: La primera carta es :: First-Leletter. Aquí, lo primero es que funciona solo en contenedores de bloque, nada que esté configurado para la pantalla: en línea; . También debe tener cuidado, porque también se dirigirán a la puntuación, símbolos como los digestos como la primera letra o lo que esté contenido en :: antes. Las propiedades disponibles para :: First-Leletter son las de fuentes, color, fondo, margen, relleno, borde, decoración de texto, alineación vertical (pero solo si el flotador está configurado en ninguno), texto de texto, altura de línea, de altura de línea, flotante y claro. Un ejemplo clásico aquí es usarlo para Drop Head: P :: First-Leletter {Color: Gray; Font-Family: Tahoma; Tamaño de fuente: 160%; } Así es como se ve la marca anterior cuando se aplica a un texto de ejemplo:
Finalmente, el soporte del navegador para :: First-LiTera es excelente:
:: La primera línea ya mencioné que esto es muy similar al de arriba, pero para la primera línea de texto dentro de un elemento. También debe tener en cuenta que solo funciona con elementos que tienen un valor de bloque de bloque, bloque en línea de bloque, lista de listas, células de mesa de corriente o celda de mesa. Las propiedades aplicables son similares a :: First-Leletter con la adición de la etiqueta de la letra. Aquí está el mismo ejemplo que se indicó, pero usando: Primera línea: P :: Primera línea {color: gris; Font-Family: Tahoma; Tamaño de fuente: 160%; } Y esto es lo que ::: la primera línea también es aceptada por casi todos los navegadores existentes
:: Marcador Este CSS de pseudo elemento existe especialmente para la lista de la lista de estilo, por lo que la usaremos. Tiene dos opciones básicas: ingrese sus propias marcas o con estilo las disponibles en HTML/CSS, como marcadores y números. Para lograr esto, tiene acceso a color, contenido, espacio blanco, fuente, animación, transición y otros. Así es como parece: li :: marcador {contenido: “”; } Como puede imaginar, esto simplemente reemplaza la lista de la lista con el emoji en cuestión:

Sin embargo, también puede usar sus propias imágenes personalizadas: Li :: Marker {Content: Url (“WordPress-logo.png”); } En este caso, usamos el logotipo de WordPress:

La estilización de los marcadores existentes funciona de la misma manera que cabría esperar. Puede cambiar su color, tamaño por tamaño de fuente, etc.

La compatibilidad del navegador para esto es excelente, incluso si no es tan amplia como para otros elementos en esta lista.

:: sustituyente como su predecesor, este es un pseudo elemento para un propósito. Solo puede usarlo para estilizar el texto sustituyente de los elementos y . Debido a este límite, solo se necesitan unas pocas propiedades. Básicamente, todos aquellos que tienen que ver con el estilo del texto más las propiedades de fondo. Aquí hay un ejemplo de cómo se ve. First html:
Después de eso, puede usar CSS Mark de la siguiente manera: Div Entrada :: marcador de posición {Color de fondo: #578EE6; Color: #000; Font-Family: ‘Brush Script Mt’, cursiva; Estilo de fuente: cursiva; Text-Align: Center; } Cuando lo haces, así es como se ve en la página (lo sé, no es muy agradable): y eso es todo. Lo único que quedó es observar la compatibilidad con el marcador de posición :: lo cual es muy bueno.

:: Selección Nuestro último ejemplo de Pseudo CSS Elementos se refiere a :: Selección. Dado que se trata de diseñar el texto cuando está marcado por el usuario, acepta propiedades CSS típicas para este tipo de trabajo. Piense en color, color color de fondo, hadow de texto de texto de texto, hadow de texto, etc. Por ejemplo, así es como podemos diseñar un párrafo HTML simple: p :: selección {color: #bae64c; Color de fondo: #E63C25; } Termina luciendo así:

También puede combinar esto con otros selectores, por ejemplo, a diferentes partes de texto separado cuando se selecciona: P.Segundo-Paragraph :: Selection {Background-Color: #578EE6; } Si atribuye la clase personalizada.

Resumen: pseudoelementos CSS pseudoelementos CSS es una gran característica. Como puede ver anteriormente, muchos de ellos son muy útiles para agregar pequeñas notas al diseño de su web. Esto puede conducir a Great to Great. Además, algunos de ellos tienen un papel más funcional, como la capacidad de limpiar el flotador. Los pseudo-elementos no son necesariamente lo primero que debe aprender en CSS, porque se trata de poner esa floración adicional en su sitio. Sin embargo, definitivamente debe ser consciente de ellos, especialmente porque más ocurren con el tiempo. Además, como esperamos haber demostrado, su uso es en gran medida bastante simple, por lo que puede levantarlos rápidamente. ¿Cuál es tu uso favorito para las pseudoclases CSS? ¡Comparta su opinión en los comentarios!