Solucionado
No código abaixo, percebi que ao inserir "[" no titulo principal, ele desfez o negrito da primeira letra do titulo. Tentei colocar "font-weight: bold !important; mas não funcionou, nem :nth-child(3) ou nth-child(1). Existe alguma solução para deixar primeira letra negrito + "[" no titulo? Segue code abaixo:
.titulo-principal::first-letter { font-weight: bold; }
.titulo-principal:before { content: "[ "; }
.titulo-principal:after { content: " ]"; }
Alguns pseudo elementos css só é permitido utilizar uma única vez. Que é o caso de '::first-line', '::first-letter', '::marker', '::line-marker' e '::selection'. Vou dar um exemplo de como você pode utilizar 2 pseudo-elementos.
.titulo-principal:hover { opacity: 0.3; } .titulo-principal:hover::before { content: "["; }
Quando colocar o mouse sobre o titulo principal, terá uma opacidade de 0.3 e aparecerá atrás dele o [
Ah legal, nao sabia dessa informação! Obrigado!