How to get a DOM element's ::before content with JavaScript?

How to get a DOM element's ::before content with JavaScript?

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript

getComputedStyle`

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

---

How to modify a DOM element's ::after style with JavaScript?

https://stackoverflow.com/questions/56590524/how-to-modify-a-dom-elements-after-style-with-javascript

demo

solution (very simple, just need add new class, and overwrite the old one)

let textareas = [...document.querySelectorAll(`[data-uid^="circle"]`)];
let btn = document.querySelector(`[data-uid="btn"]`);

btn.addEventListener(`click`, () => {
    textareas.forEach((textarea, i) => {
        textarea.setAttribute(`class`, `tips tips${i} rotate`);
    });
});

// let center = 2;
textareas.forEach((textarea, i) => {
    textarea.addEventListener(`click`, () => {
        for (const item of textareas) {
            item.classList.remove(`tips-highlight`);
        }
        textarea.classList.add(`tips-highlight`);
    });
});

.tips::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -19%;
    height: 30px;
    width: 30px;
    background-color: #00c991;
    border-radius: 50% 50% 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tips-highlight::after {
    background-color: #f82eb5;
}

refs

https://stackoverflow.com/a/14106897/5934465

https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

js

https://stackoverflow.com/questions/7330355/javascript-set-css-after-styles/7330454#7330454

js

jquery ???

$("#foo li:after").css("left","100px");

pseudoStyle lib

http://mcgivery.com/htmlelement-pseudostyle-settingmodifying-before-and-after-in-javascript/

var UID = {
    _current: 0,
    getNew: function(){
        this._current++;
        return this._current;
    }
};

HTMLElement.prototype.pseudoStyle = function(element,prop,value){
    var _this = this;
    var _sheetId = "pseudoStyles";
    var _head = document.head || document.getElementsByTagName('head')[0];
    var _sheet = document.getElementById(_sheetId) || document.createElement('style');
    _sheet.id = _sheetId;
    var className = "pseudoStyle" + UID.getNew();
    
    _this.className +=  " "+className; 
    
    _sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
    _head.appendChild(_sheet);
    return this;
};

not exist

three = document.querySelector(`[data-uid="circle3"]`);
three.pseudoStyle("after", "color", "purple");

OK