［小ネタ］CSS 疑似要素（:after :before）をインラインスタイルで直に html に書きたい！

CSS のテストをするとき、html に style を直書きしてブラウザでどう表示されるのか確認したいときがあります。

複数のファイルに分けたりすると、読み込み時にキャッシュを拾ったのかどうかの判断が面倒で、忘れがちです。
再読み込みのし忘れで、スタイルが反映されないなどと、無意味に悩むことがあります。

そのため、とりあえずインラインでスタイルを書いて、上手くいったら、それをまとめて個別のスタイルに落とし込むという人は少なくないと思います。少なくとも私はそうです。

簡単な例を上げます。

 css/html
// CSS
<style>
.marking {
  display: inline-block;
}
.marking::before {
  content: "◆";
  color: red;
}
.marking::after {
  content: "●";
  color: blue;
}
</style>
// HTML
<p class="marking">この文字例の前後に記号が自動で入ります</p>

上を表示すると

◆この文字例の前後に記号が自動で入ります●

のようになります。

ここで、例の◆を一時的に（多数の中の一つだけを）□に書き換えたいとき、わざわざ css のコードを新しく作ったり、スタイルシートを作りたくないというとき、どうするかというネタです。

結論としては、あまり大した解決策はありませんでした。

私的にはstyle="content: "□";"をインラインで仕込む方法があることを期待していましたが、出来ないようです。

具体的には以下のような書き方でなんとかなる方法があるものと思い込んでいました。

 失敗例
<p class="marking" style="content: "□";">この文字例の前後に記号が自動で入ります</p>

CSS の疑似要素は、html には直接書かれていないタグなどを、CSS で擬似的に再現する記述手法です。よくあるのが、箇条書きなどで使われる「・」など、勝手に行頭に挿入されるような例です。多くは :after と :before で表現されるので、そのほかのものはさほど使いません。

結論

疑似要素は style 属性で inline　で直書きすることができません。
::before や ::after で生成される要素を擬似的にではなく <span> で直接作れば、結果として同じになります。

 css/html
// HTML
<span class="marking" style="background-color:white;">
  <div class="before-marking" style="background-color:inherit;"></span>
  この文字例の前後に記号が自動じゃないけど入ります
  <span class="after-marking" style="background-color:inherit;"></span>
</div>
// CSS
<style>
.marking {
  display: inline-block;
}
.before-marking {
  content: "◆";
  color: red;
}
.after-marking {
  content: "●";
  color: blue;
}
</style>

::before や ::after は結局上のようなコードを自動で作成しているだけのようです。

上の方法で、少しばかり理解が進みましたが、私の場合、手軽にコードをテストしたいだけなので、あまり望んだ解決方法が得られませんでした。残念ですが、ズルしてコードを書く方法は無いようで、そもそも疑似要素自体が横着して記述する方法なんですね。