[Duda] Pseudo clases vs Pseudo Elementos y ¿Cómo hacer para que un pseudo elemento no me elimine la acción de otro?

Hola Mariel.

PseudoClase es parte del elemento seleccionado que se le puede agregar un estilo y contendio por ejemplo agregar "♣" al inicio de un parrafo "p" y de colo rojo con ::before

 p::before {
            content: "♣";
            color: red;
        }

Por otro lador las pseudoclases hace referencia a los estados como :hover

  p:hover {
            color: blue;
        }

En este caso cambia el texto a azul Algo curioso es que el ::before esta fuera del rango del hover por ende el "♣" no cambia azul pero se puede hacer uniendo las 2 cosas como

     p:hover::before {
            color: blue;
        }

Y como respuesta que tu first-letter no lo elimina sino que como agregaste el corchete con ::before ese seria la primera letra por ende eso se pone en negrita y para que "H" este en negrita no he podido logralo amenos que se haga con javascript