【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。
擬似要素のcontentについてそういえば調べたこと無かったのを反省。
擬似要素はJSから操作できない
ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、
調べた感じ、JSで擬似要素は変更できないぽい。
(CSSを修正して、とかは可能だが)
擬似要素は元?の要素の属性を参照できる
擬似要素のcontent内でattr()を使用することで、
擬似要素が設定されている要素の属性を取得し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.