Showing the before pseudo-class of a hidden div.

Today I had to do figure out a way to show an automatic message on a hidden div (which had display: hidden), so the idea was that the user would see a message and after clicking on a button, the message would be removed and in its place the hidden div would be shown.

A found a tricky solution:

instead of using display: hidden, in which case, the before pseudoclass would be hidden as well, why not use a negative text-indent approach? And it worked!

You can take a look to my codepen below, but the trick is more or less simply:

.container-box {
  text-indent: -9999px;
}

.container-box:before {
  text-indent: 0;
}