css - 要素の最初の文字を適用する CSS 疑似要素

Question

h1 タグに「(Hello World)」というコンテンツがあるため、css に次を追加して、この要素の最初の文字を変更します。

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

しかし、私が気付いたように、first-letter は文字専用なので、このスタイルを最初の char に適用する回避策はありますか? この場合は「(」です。

Answer 1

仕様から：

句読点 (つまり、 「オープン」(Ps)、「クローズ」(Pe)、「イニシャル」(Pi)、「ファイナル」(Pf) および「その他」(Po) の句読点クラスで Unicode [UNICODE]で定義された文字) 、最初の文字の前後にあるものを含める必要があります

したがって、ブラケットと文字 H は によって選択されます。これは、文字ではなく句読点記号と見なされる:first-letterためです。(

次の 2 つの回避策があります。

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代わりにand/orを使用します: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: ')'; }