::beforeや::afterのcontentプロパティを動的に変更する方法

Elementの前後にコンテンツを挿入するために擬似要素がある。
とりあえず擬似要素のサンプル。どちらも「擬似テスト要素」と表示される。

<style>
  .pseudo::before {
    content: "擬似";
    font-size: 50%;
  }
  .pseudo::after {
    content: "要素";
    font-size: 80%;
  }
</style>

<!-- 擬似要素を使う -->
<p class="pseudo">テスト</p>

<!-- 擬似要素を使わない -->
<p><span class="before">擬似</span>テスト<span class="after">要素</span></p>

擬似要素を使うことで、HTMLの可読性が向上していることがわかるだろう。
他にもいろんなことができるが、本題に逸れるため省略する。

擬似要素のcontentを動的に変更する

擬似要素が便利なのはわかったと思う。
そして、contentプロパティを動的に変更するためには attr() と JavaScript を使う。

<!-- index.html -->
<p class="static">value</p>

<p class="dynamic">value</p>

/* style.css */
.static::before {
  content: '*'
}
.static::after {
  content: '1';
}

.dynamic::before {
  content: attr(prefix-value);
}
.dynamic::after {
  content: attr(suffix-value);
}

// script.js
var p = document.getElementsByClassName('dynamic')[0];
var c = 0;
var pre = ['-', '+', '*'];

setInterval(function(){
  c++;
  p.setAttribute('prefix-value', pre[c % 3]);
  p.setAttribute('suffix-value', c);
}, 1000);

7, 8行目のところでcontentプロパティに設定される attr(prefix-value) を変更している。
どんな仕組みで値が変更しているかは MDNの例 がわかりやすいと思う。

ちなみにCSS2では :before, :after だったのが、
CSS3では擬似クラスと区別するために ::before, ::after となっている。


以上

written by @bc_rikko