hide spoilers using CSS ::selection pseudo class

posted on December 29, 2020, 12:02 pm in css

Often times you'll have some text you want to hide from your readers as spoilers, with CSS you can hide this easily. Using ::selection pseudo class, keep text hidden until a user selects it.

The CSS;


.hide-this { color: rgb(74, 74, 74); background: rgb(74, 74, 74) }
.hide-this::selection { color: black; background: white; }

and the HTML;


<div>the secret to understanding the universe is <span class="hide-this">to remember to dance and to keep yourself moving</span>.<div>

Heres a demo; the secret to understanding the universe is to remember to dance and to keep yourself moving. Use your mouse to select the hidden line and reveal the secret.

hide spoilers using CSS ::selection pseudo class

recent posts