<div id="container">
  Hello before
</div>
<button id="change">apply before</button>
div#container {
  width:300;
  height:200;
  border:1px solid black;
  text-align:center;
}

.apply::before {
  content:"❤";
  text-align:center;
  width:100%;
}
const container = document.getElementById("container");
const changeBtn = document.getElementById("change");
let isBefore = false;
changeBtn.addEventListener("click", ()=>{
  if (!isBefore) {
    container.classList.add("apply");
    isBefore = true;
  } else {
    container.classList.remove("apply");
    isBefore = false;
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.