Overwrite a div content with CSS

I need to replace the contents of a divs text with Cascading Style Sheets only

Suppose I have the following div

<div class="text-div">
Happy times
</div>

Now I want it to say something more interesting like

<div class="text-div">
🧨
</div>

To do this find the selector and use a pseudo element to stick on top of like so

.text-div {
    visibility: hidden;
}

.text-div::after {
  visibility: visible;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 3px #ccc;
  color: black;
  content: "🧨New🧨";
  left: 0;
  top: 0;
}