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>
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

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