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

A los selectores se les pueden agrgar determinadas palabras que los convierten en pseudo elementos, lo que permite aumentar el control de la páginas con CSS