title: Change the property of CSS pseudo element
body: <p>I have the following css script</p>
  
  <pre><code>.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;
              }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>var faceyFace=document.querySelector(".facey:after");
  faceyFace.style.border-radius:="1 1 8px 8px"
  
  </code></pre>