on 2015-04-05

CSS - Modify Pseudo Element Content

之前遇到個問題就是偽元素的內容(content)到底可不可以修改, 於是就求助於 Google

最後的答案是可以的, 而且還不少方法

Refer - Modify pseudo element styles with JavaScript

看下來就以下的方式個人覺得最好用

#red::before {
    content: attr(data-attr);
    color: red;
}

<p id="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>

    setTimeout(function (argument) {
        document.querySelector('#red').setAttribute('data-attr', 'green');
    }, 3000);