Los pseudoelementos

Los pseudoelementos son modificadores de los selectores CSS 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 antes del 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>

.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

Para los pseudo elementos se usan los cuatro puntos ::, pero por compatibilidad con css1 y css2 es habitual ustlizar solo dos puntos :