<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;
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.