Spoiler Text

My wife gave me a mini code challenge for her post today.

She wanted to hide some spoilers from a book review. We’d rather hide the spoilers behind a click or hover, and I normally would accomplish that with a bit of jQuery, but her blog is hosted on WordPress.com so interactivity wasn’t really an option with only CSS available for editing.

A simple, one-time solution could’ve been to change the text color of the spoiler to the same as her background color, allowing the reader to highlight the text and read the text. But I wanted to give her something she could use again in future book reviews, so this little CSS class seemed easy enough.

I helped her wrap the spoiler text in some span tags:

<span class="spoiler-text">Spoiler</span>

Then added this CSS to her WordPress.com Customizer.

.spoiler-text {
     background: #574d4d;
     color: #574d4d;
     display: run-in;
}

.spoiler-text::before {
     content: "Highlight to read Spoilers";
     color: #fff;
     display: run-in;
}

The result is an inline block of color you can highlight to reveal the spoiler, with a note added.

The color #574d4d was her original text color, so that’s what I went with for the color block. Changed the text color for the class as well in case she edits her default text color in the future.

She liked this well enough so it’s up and running. 🙂

Leave a comment if you have other ideas on how to handle spoiler text with only CSS.