Un pseudoelemento CSS es una palabra clave añadida a un selector que le permite diseñar una parte específica de los elementos seleccionados. Por ejemplo, aplicar estilo a la primera letra o línea de un elemento,
Insertar contenido antes o después del contenido de un elemento. Todo esto se puede hacer usando Pseudo Elementos en CSS.
Tenga en cuenta que, a diferencia de los pseudoelementos, las pseudoclases se pueden usar para diseñar un elemento en función de su estado.
Sintaxis:
selector::pseudo-element {
property: value;
}
Hay muchos pseudoelementos en CSS, pero los que se usan más comúnmente son los siguientes:
- ::first-line Pseudo-element aplica estilos a la primera línea de un elemento a nivel de bloque. Tenga en cuenta que la longitud de la primera línea depende de muchos factores, incluido el ancho del elemento, el ancho del documento y el tamaño de fuente del texto. Tenga en cuenta que solo se aplican unas pocas propiedades para el pseudoelemento de primera línea, como propiedades de fuente, propiedades de color, propiedades de fondo, espaciado de palabras, espaciado de letras, decoración de texto, alineación vertical, transformación de texto, altura de línea, claro , etc.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-line Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::first-line{
color:Red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::first-line element</h2>
<p>This is a paragraph using first-line pseudo-element
to style first line of the paragraph.Content in the
first line turns red and becomes bold.</p>
</body>
</html>
Producción:
- ::first-letter Pseudo-element aplica estilos a la primera letra de la primera línea de un elemento de nivel de bloque, pero solo cuando no está precedido por otro contenido (como imágenes o tablas en línea). Tenga en cuenta que solo se aplican unas pocas propiedades para el pseudoelemento de primera línea, como propiedades de fuente, propiedades de color, propiedades de fondo, espaciado de palabras, espaciado de letras, decoración de texto, alineación vertical, transformación de texto, altura de línea, claro , etc.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-letter Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::first-letter{
color:Red;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::first-letter element</h2>
<p>This is a paragraph using first-letter pseudo-element
to style first letter of the paragraph.first-letter element
turned the first letter of this paragraph to red
and made it bold.</p>
</body>
</html>
Producción:
- :: before Pseudo-element crea un pseudo-elemento que es el primer hijo del elemento seleccionado. A menudo se usa para agregar contenido cosmético a un elemento con la propiedad de contenido. Está en línea por defecto.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>before Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::before{
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::before element</h2>
<p>This is a paragraph to which we added red color quotation marks
using ::before element.</p>
</body>
</html>
Producción:
- ::after Pseudo-element crea un pseudo-elemento que es el último hijo del elemento seleccionado. A menudo se usa para agregar contenido cosmético a un elemento con la propiedad de contenido. Está en línea por defecto.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>after Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::after{
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::after element</h2>
<p>This is a paragraph to which we added red color quotation marks
using ::after element.</p>
</body>
</html>
Producción:
- ::marker El pseudoelemento selecciona el cuadro de marcador de un elemento de lista, que normalmente contiene una viñeta o un número. Funciona en cualquier conjunto de elementos o pseudoelementos para mostrar: elemento de lista, como los elementos <li> y <summary>.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>marker Demo</title>
<style>
body{
background-color: whitesmoke;
color: green;
text-align: center;
}
ul{
width: 40px;
}
ul li::marker{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::marker element</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Producción:
- ::El pseudoelemento de selección aplica estilos a la parte de un documento que ha sido resaltada por el usuario, como hacer clic y arrastrar el mouse por el texto.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>selection Demo</title>
<style>
body{
background-color: whitesmoke;
color: green;
text-align: center;
}
p::selection{
color: red;
background-color: green;
font-size: 30px;
}
::selection{
color: green;
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::selection element</h2>
<p>Content in this paragraph turns red with
green background on selection.</p>
<span>As this is not a paragraph, you can notice red
background and green text on selection.</span>
</body>
</html>
Producción:
