Change the property of CSS pseudo element

Question

I have the following css script

.facey{
                position:relative;
                display: inline-block;
                width: 24px;
                height: 24px;
                border: 3px solid black;
                border-radius: 20px;
                margin: 50px auto;
            }

            .facey:before{
                content: '';
                position: absolute;
                top: 25%;
                left: 50%;
                width: 4px;
                height: 2px;
                margin-left: -4px;
                border-left: 2px solid black;
                border-right: 2px solid black;
            }
            .facey:after{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width:10px;
                height: 5px;
                margin-left: -7px;
                border-bottom: 2px solid black;
                border-left: 2px solid black;
                border-right: 2px solid black;
                border-radius: 0 0 8px 8px;
            }

I want to access the .facey:after with JS so that I can change some of its property but I am not sure how to. I tried the below:

var faceyFace=document.querySelector(".facey:after");
faceyFace.style.border-radius:="1 1 8px 8px"

You can't change an existing rule but you can access one of its properties using `window.getComputedStyle()` and then dynamically add a new rule, overwriting the old. — Asons, May 03 '19 at 20:12
The duplicate have it all ... second answer show how-to using plain javascript — Asons, May 03 '19 at 20:43

Change the property of CSS pseudo element

0 Answers0