Los pseudoelementos CSS se utilizan para diseñar partes específicas de un elemento y se utilizan para agregar efectos especiales a algunos selectores. Para hacer esto, no necesitamos ningún script como javascript para agregar los efectos.
Sintaxis:
selector::pseudo-element {
property: value;
}
Nota: Los dos puntos dobles reemplazaron la notación de dos puntos para los pseudoelementos en CSS3. Dos puntos individuales también se pueden usar en CSS1 y CSS2.
Aplicaciones:
- Para agregar estilos especiales a la primera línea del texto en un selector.
- Para agregar un estilo especial a la primera letra del texto en un selector.
- Para insertar algún contenido antes de un elemento.
- Para insertar algún contenido después de un elemento.
- Para hacer coincidir la parte de un elemento que ha seleccionado un usuario.
- También se pueden combinar múltiples pseudo elementos.
Ahora veremos cómo usar los efectos anteriores en el texto de muestra dentro de la etiqueta p.
Ejemplo: En este ejemplo, usaremos el siguiente código HTML para demostrar los efectos de CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="main.css"> </head> <body> <p> Geeks for geeks is a computer science portal for geeks and computer enthusiast. Geeks for geeks provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </body> </html>
Producción:
Ahora aplicaremos CSS al código HTML anterior.
1. selector:: first-line: el pseudo elemento de primera línea agrega estilos especiales a la primera línea del texto en un selector. Podemos agregar variedad de estilos a la primera línea usando esto. Aquí vemos ejemplo:
main.css
/* Write CSS Here */
p::first-line{
color: blue;
font-size: 2rem;
}
Producción:
2. selector::first-letter: Pseudoelemento de primera letra agrega estilos especiales a la primera letra del texto en un selector. Podemos agregar variedad de estilos a la primera letra usando esto.
main.css
p::first-letter{
color: blue;
font-size: 2rem;
font-family:sans-serrif;
font-weight: bold;
}
Producción:
3. selector::before: Antes del pseudo elemento se usa para agregar el contenido antes del selector. Se requiere la propiedad de contenido para agregar el texto.
main.css
p::before {
content: 'I am before paragraph';
color: red;
font-size: 3rem;
font-weight: bold;
}
Producción:
4. selector::after: After pseudo elemento se utiliza para agregar el contenido después del selector. Se requiere la propiedad de contenido para agregar el texto.
main.css
p::after {
content: 'Focus on me';
color: red;
font-size: 3rem;
font-weight: bold;
}
Producción:
5. selector::selection: Este pseudo-elemento aplica el estilo a los elementos que son seleccionados. por ejemplo, el texto resaltado dado se está seleccionando y podemos ver que se agregaron los efectos dados.
main.css
::selection {
color: red;
background: yellow;
}
Producción:
6. Adición de varios pseudoelementos a un selector: también podemos agregar más de un pseudoelemento a un selector dado, como se muestra a continuación.
main.css
p::before {
content: 'Before';
color: red;
font-size: 3rem;
font-weight: bold;
}
p::after {
content: 'After';
color: red;
font-size: 3rem;
font-weight: bold;
}
Producción:
