¿Por qué una regla de estilo de pseudo-elemento en un elemento estándar se aplica también a un pseudo-elemento relacionado?

Me pregunto por qué este código también cambiará la primera letra de h1::before. Busqué acerca de la especificidad de CSS, y los tres son iguales ya que todos tienen un elemento y un pseudo-elemento (si estoy equivocado, por favor díganme). Luego, creo que deberían seguir por orden. Este es el proceso en mi mente: cambiará la primera letra de h1, luego agregará un pseudo-elemento antes de h1 con contenido y luego agregará el pseudo-elemento después. La primera letra no cambiará. ¿Alguien puede ayudarme a entenderlo?

h1::first-letter {
font-size: 70px;
font-style: italic;
color: yellow;
}

h1::before {
content: “Esto es”;
color: green;
}

h1::after {
content: “del sitio web”;
}

Encabezado