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.

spoilertextonbrewsandewes

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.

Have a comment? Try to be nice.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s