How to create spoiler text?

Question

Hello I was wondering how to make spoiler text on a website with html/css. What I was is, text that is black with black background, but when hovered over, makes the black text

Answer 1

How to use checkbox as spoiler hide or show

If you wan't to know that you can also use checkbox for making spoilers. It's quite simple too.

#spoilerdiv1 {
  background-color: lightgray;
  padding: 2.5px;
  visibility: hidden;
  margin-top: 10px;
}

#spoilercheck1:checked ~ #spoilerdiv1 {
  visibility: visible;
}

An example HTML Spoiler




  
This is the spoiler content

---

Quite boring looking. Let me add just a bit some styles at least it's not boring at all.

// No JavaScript needed at all!

* {
  font-family: Calibri;
}

#spoilercheck1 {
  visibility: hidden;
}

#spoilerlabel1 {
  color: white;
  background-color: orange;
  font-size: 1.25em;
  padding: 5px;
  cursor: pointer;
}

#spoilerlabel1:hover {
  background-color: orangered;
}

#spoilerdiv1 {
  background-color: lightgray;
  padding: 2.5px;
  height: 0;
  font-size: 0;
  margin-top: 10px;
  transition: 500ms;
  opacity: 0;
  border-radius: 15px;
}

#spoilercheck1:checked ~ #spoilerdiv1 {
  height: auto;
  font-size: 1em;
  opacity: 1;
}

Spoiler example

» Spoiler

  
This is the spoiler content