JavaScriptで疑似要素のスタイルを操作できたらいぃのになぁ〜なんて思いつつ数年の月日が経ち、クラスを追加、削除、変更などで対処してきましたが、参考になる記事を見付けたので自分用にメモ。

疑似要素（::before,::after）のプロパティを取得する【JavaScript】＠penpenメモ

例えば

好きなマーク付きのリストを表示するときによく使うのがこちら、

.html

<ul class="list--reference-mark>
  <li>価格はすべて税込価格です。</li>
</ul>

.scss

.list--reference-mark {
  li::before {
    content: '※';
    margin-right: .5em;
  }
}

こんな感じ↓

この「※」をJavaScriptで取得したい。

JavaScriptで取得

Window.getComputedStyle関数で取得できます。

.js

let mark = getComputedStyle(document.querySelector('.list--referece-mark li'), '::before' ).content;
console.log(mark); // ※

getComputedStyleの第一引数には、計算したスタイルを取得したい要素
第二引数（省略可）には、一致させる擬似要素を指定する文字列。実在する要素の場合は省略（または null）。

さて、この方法が必要だったプロジェクトは終わったし、何か有用な使い道を考えよ〜