【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

擬似要素のcontentについてそういえば調べたこと無かったのを反省。

擬似要素はJSから操作できない

ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、
調べた感じ、JSで擬似要素は変更できないぽい。
（CSSを修正して、とかは可能だが）

擬似要素は元？の要素の属性を参照できる

擬似要素のcontent内でattr()を使用することで、
擬似要素が設定されている要素の属性を取得しcontentにセットすることができる。

content−スタイルシートリファレンス

.sample::before {
  /*sampleクラスのidがcontentにセットされる*/
  content: attr(id);
}

デモ

ボタンをクリックした時にJSで#sample-buttonのdata-count属性を書き換える(カウントアップ)と
::afterのcontent(ボタン右上の数字)に反映される。

See the Pen Use attr method at pseudo-element by Fumihiro Nakahara (@711fumi) on CodePen.