CSSの疑似要素『::before』『::after』 etc をSTYLE要素でHTMLに直接記述できるかどうか調べてみた

WordPressの案件で、1つの記事にスタイルを当てたかったのでインライン記述をしていたのですが、疑似要素が効かなかったので調べてみました。

疑似要素はインライン記述できるのか

結論から言うとできませんでした。

できなかったのですが、いろいろ調べてみると紛らわしい情報がたくさんあったのでまとめてみました。

まずは『W3C 標準情報 (TR) の草案』を翻訳したページに

XML ベースの文書形式がすべて “style” 属性を用意していて、ユーザが CSS で文書や文書中の特定の要素にスタイル指定できるというわけではありませんが、 ある形式で “style” 属性が用意されており、その属性の値に CSS を使えるような場合については、 この仕様がその属性の構文と解釈を規定します。

ここでいくつか例を示しましょう。

1. 擬似要素や擬似クラスを使わず、要素自体のプロパティのみを設定する。
   
   &lt;p style="<span class="emph-code">color: #090; line-height: 1.2</span>"&gt;...&lt;/p&gt;

   1	&lt;p style="<span class="emph-code">color: #090; line-height: 1.2</span>"&gt;...&lt;/p&gt;

2. 要素に加え、’::first-letter’ 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。この場合は大括弧 ({…}) が必要になる点に注意してください。
   
   &lt;p style="<span class="emph-code">{color: #090; line-height: 1.2}</span> <span class="emph-code">::first-letter {color: #900}</span>"&gt;...&lt;/p&gt;

   1 2	&lt;p style="<span class="emph-code">{color: #090; line-height: 1.2}</span>           <span class="emph-code">::first-letter {color: #900}</span>"&gt;...&lt;/p&gt;

3. 擬似クラスを使って、動的な状態のそれぞれについて、 ソースアンカーにプロパティを設定する。
   
   &lt;a href="http://www.w3.org/" style="<span class="emph-code">{color: #900}</span> <span class="emph-code">:link {background: #ff0}</span> <span class="emph-code">:visited {background: #fff}</span> <span class="emph-code">:hover {outline: thin red solid}</span> <span class="emph-code">:active {background: #00f}</span>"&gt;...&lt;/a&gt;

   1 2 3 4 5 6

   &lt;a href="http://www.w3.org/"           style="<span class="emph-code">{color: #900}</span>           <span class="emph-code">:link {background: #ff0}</span>           <span class="emph-code">:visited {background: #fff}</span>           <span class="emph-code">:hover {outline: thin red solid}</span>           <span class="emph-code">:active {background: #00f}</span>"&gt;...&lt;/a&gt;

HTML の “style” 属性における CSS 規則の構文

という記述がありました。

See the Pen
疑似要素のインライン記述 by sank (@sank_f)
on CodePen.

ただ上記結果を見てもらえればわかりますが、このソースをそのまま書いても実装できません。

• ひとつめがインライン記述を試みた結果。
• ふたつめがクラスを付与しCSS記述をした結果

になります。

これはあくまでも2001 年 3 月 5 日の草案なので、実際には実装されずに終わったのかもしれません。

ですので、冒頭にも書きましたが、現状では疑似要素のインライン記述は不可能でした。

WordPressで1つの記事だけスタイルを変更したい

今回の私がそうだったのですが、1つの記事だけスタイルを変更したい。
使用しているWordpressテーマにカスタムCSSエリアがない。
HTMLにインライン記述したいが、疑似要素を使用しなくてはいけない。

そんな時があるかもしれません。

そんな時は「テキスト」タブで、変更したい箇所に「タグ」と「独自クラス」を付与しましょう。

WordPressには右ナビの「外観」→「カスタマイズ」内に「追加CSS」エリアがあるので、そこに追記したクラスにスタイルを付与すれば、そのページの「独自クラス」を付与した箇所だけにスタイルを適用することができます。