Hide pseudo element on click

Question

On my wordpress site I have a button on the home page that loads more posts. I wanted to add a little upside down caret next to the words "load more posts" so I added a "v" using pseudo elements. I've gotten it to look how I want it to, but when I press the button the v doesn't disappear with the rest of the button? I have tried fixing it with an ::active class but it still appears. What do I have to do to make it disappear?

example of button

after button click (I don't want the v to appear)

current css code

.elm-button::before {
    content: "v"; 
    font-size:11px;
    float: right;
    margin: 6px 0 0 14px;
    font-family: 'Days One', sans-serif;
}
.elm-button::active {
display: none;
    visibility: hidden; 
}

Answer 1

There is an error in your snippet. :active is a pseudo-class, not a pseudo-element, so it has only one colon.
So, how's this.

.elm-button {
  background:none; border:none; font:inherit;
 }
.elm-button::before {
    content: "v"; 
    font-size:11px;
    float: right;
    margin: 6px 0 0 14px;
    font-family: 'Days One', sans-serif;
}
.elm-button:active {
display: none;
    visibility: hidden; 
}

<button class="elm-button" type="button">Load more posts</button>

(Also, I presume you need .elm-button:focus as well, but that isn't very clear from the problem description.)

Answer 2

UPDATE

I just realized the same answer was given before. It did not work for OP for some reason. Here is another approach from W3Schools, and this gives you more freedom to control each one separately (the css and its pseudo).

var clickedToLoad = false;
$('.elm-button').on('mousedown',
    function(){
      document.documentElement.style.setProperty('--before-display', 'none');
    }
  )
$(document).on('mouseup',
    function() {
      document.documentElement.style.setProperty('--before-display', 'block');
    }
);

:root {
  --before-display: block;
}
.elm-button {
  display: var(--before-display);
}
.elm-button:before {
  content: "v";
  float: right;
  margin-left: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<BUTTON class="elm-button">LOAD MORE POSTS</BUTTON>

---

Original Answer

To be clear, you can not change a CSS pseudo elements using JS or JQuery. However, there are other options. Please refer to this previous question

But, your case is much easier, as you can simply change a typo in your code (added double dots before the active keyword):

.elm-button::before {
  content: "v"; 
  font-size:11px;
  float: right;
  margin: 6px 0 0 14px;
  font-family: 'Days One', sans-serif;
}
.elm-button:active {
  display: none;
  visibility: hidden;
}

/* Added only to match your output*/

.elm-button {
  background: inherit;
  border: none;
}

<BUTTON class="elm-button">LOAD MORE POSTS</BUTTON>