code everywhere

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 colorrgb(747474); backgroundrgb(747474) }
.
hide-this::selection colorblackbackgroundwhite; }

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.
< back
find something helpful? send us some coin BTC 1A6KbS5AmYQVAh5Zcy9rVSnMAoCEunLUqT

(ad) Need Hosting? Try Linode, VPS Starting from $5