Spoiler/sensitive sections in HTML and CSS

<details class="spoiler" style="--hidden: 'Text to be hidden'">
...
</details>
details.spoiler::after {
content: var(--hidden);
filter: blur(4px);
}

details[open]::after {
display: none;
}
details.spoiler summary::after {
content: var(--hidden);
filter: blur(4px);
display: block;
}

details[open] summary::after {
display: none;
}
  • Little code: it’s literally adding an attribute in HTML and 8 lines of CSS.
  • Standard HTML: it is supported by all major browsers (basically, everything but IE and old versions of Edge.)
  • Content can be rehidden: if we want to hide the content, we can click again on the <summary>.
  • Works better with little content: this solution is for single paragraphs or images. It would be tricky to hide large chunks of text.
  • May require additional styling: we will need to update the CSS for the ::after to match the style of the content inside the <details> so there's no "jump effect" on show/hide.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvaro Montoro

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro