CSS псевдоэлемент для применения первого символа элемента

Question

В моем теге h1 есть следующее содержимое: "(Hello World)", поэтому я добавляю следующее в мою css, чтобы изменить первый символ этого элемента:

h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }

Но, как я заметил, первая буква только для букв, так есть ли какие-нибудь обходные пути, чтобы применить этот стиль к первому символу? Который в этом случае "(".

Answer 1

Из спецификации :

Пунктуация (т. Е. Символы, определенные в Unicode [UNICODE] в «open» (Ps), «close» (Pe), «initial» (Pi). «Final» (Pf) и "другие" (Po) классы пунктуации), которые предшествуют или следуют за первой буквой, должны быть включены

Таким образом, ваши скобки и буквы H выбраны :first-letter, потому что ( считается символом пунктуации, а не буквой.

Есть два обходных пути:

1. Заверните открывающую скобку в span теги:

   <!-- To style both (), wrap both in <span> tags -->
   <h1><span>(</span>Hello World)</h1>
   

   и цель h1 span:

   h1 span {
       font-size: 63px;
       color: #510007;
       font-family: Helvetica;
   }
   

2. Скиньте скобки со своего текста:

   <h1>Hello World</h1>
   

   и используйте :before и / или :after вместо этого (не поддерживается в IE7 и более ранних версиях):

   /* To style both (), use h1:before, h1:after */
   h1:before {
       font-size: 63px;
       color: #510007;
       font-family: Helvetica;
   }
   
   h1:before { content: '('; }
   h1:after { content: ')'; }