Spoiler

index.html

<p>This is non-spoiler.</p>
<p class="spoiler">This is a spoiler.</p>
<p>This is also non-spoiler.</p>
<p class="spoiler" data-spoiler-warning="Spoilers, Sweetie!">This is a spoiler.</p>

Spoiler.markdown

Spoiler

Playing with currentColor for a cascading spoiler alert.

A Pen by Miles Rausch on CodePen.

License.

style.css

/* Regular page styles */
body {
  color: #333;
  font-family: georgia, "times new roman", serif;
  text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
::selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}

/* Spoiler styles */
.spoiler {
  background: currentColor;
  padding: 0.25em 0.5em;
}
.spoiler::before {
  color: rgba(255, 255, 255, .9);
  content: "Spoiler!";
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.25em;
}
.spoiler::selection {
  background: rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .75);
  text-shadow: none;
}
.spoiler[data-spoiler-warning]::before {
  content: attr(data-spoiler-warning);
}