Crea tu web, tutor html, css

Los pseudoelementos

Los pseudoelementos son modificadores de los slectores de un elemento que permiten aplicar una regla sobre una parte del elemento:
elemento::after
Inserta algún contenido despues el elemento. Por ejemplo puede colocar una flecha después de todos los hiperenlaces <a></a>, solo se puede añadir texto, no se admite código html
element::before
Inserta algún contenido despues el elemento. Por ejemplo podría colocar una viñeta antes del comienzo de los párrafos. Solo se puede añadir texto, no se admite código html
element ::first-letter
Se aplicaría a la primera letra de un elemento, por ejemplo para que la primera letra de un párrafo sea en negrita o con una tipografía diferente
element ::first-line
En este caso se selecciona la primera lina de un elemento. En un párrafo sería la primera linea con un estilo distinto
element ::selection
Aplicaría el estilo al texto seleccionado por el usuario

Estos pseudo elementos se pueden aplicar a cualquier a los elementos predefinidos de HTML5 (los párrafos, enlaces, tablas, bloques, etc), a clases definidas en una sección style o a elementos con otros selectores (:child, :link, :empty, etc).

Veamos como actua y sus efectos con estos ejemplos, que puedes probar en el editor on line para acmbiarlos y ver como afectan al texto de la página web.
<!doctype html>
<html>
<head><meta charset="utf-8">
<title>Pseudoelementos</title> <style> p::first-letter{ font-size:24px; text-transform:uppercase; font-weight:bold } </style> </head><body> <p>escribas como la escribas la primera linea de estos párrafos van a aparecer en mayúculas, negrita y grande</p> Si no estás en un párrafo esto no se aplica<br>
<p>solo se aplica a los párrafos</p> </body></html>
Prueba y experimenta con estos pseudo elementos

En este ejemplo los párrafos comienzan con una letra en mayúscula, negrita y de 24px de tamaño. Todos los párrafos, con las clases puede seleccianar a cuales se les apllican los pseudoelementos

<!doctype html>
<html>
<head><meta charset="utf-8">
<title>Pseudoelementos</title> <style> .destacar::first-line{ background-color: red; color:white; font-style:italic } </style> </head><body> <div>Este bloque div es normal.<br> Todas la líneas se ven igual</div> <div class="destacar">Este bloque es especial<br> La primera linea está destacada:<br> color de fondo rojo y letras blancas</div> </body></html>
Pseudo elemento aplicado a un selectro de clase

En este otro ejemplo tienes un bloque div con la primera linea destacada con letras blancas cobre fonod rojo, mientras el otro aparece sin modificar

lateralApdo