2 Ways to Create Spoiler Text in HTML

Have you ever been scrolling through a website and seen a piece of text that was blacked out, but was still readable? That's called spoiler text, and it's a great way to keep readers engaged. Spoiler text can be easily created in HTML, and there are two easy ways to do it. The first way is to use a background color and set the text color to the same color, making it invisible. The second way is to use a <details> tag that hides the content until the user performs an action, such as clicking on a button. Both techniques are quick and easy to implement, so you can have spoiler text set up on your website with just minutes of work. Below are the examples:

1. Create Spoiler Text Using CSS

Follow these steps to create spoiler text using CSS:

Create a paragraph text in <p> tags or create a heading in heading tags (<h2>, <h3>, <h4>) in HTML for your question. And then put the answer in the <span> tags with a class, for example spoiler as shown below:

<h4>What is the name of this website?</h4>
<span class="spoiler">Fox Infotech</span>

Then you can use the following CSS to show/hide the spoiler text:

.spoiler { 
  color: #000000; 
  background-color:#1967d2;
}

.spoiler:hover{
  color: white;
  }

Output

What is the name of this website?

2. Create Spoiler Text Using <details> HTML Tag

You can simply place your spoiler text between the <details> tags to show/hide the text on click. Below is an example:

<details>
    <summary>Click to reveal the answer.</summary>
     You got the answer.
</details>

Output

You have just learned how to create spoiler text in HTML using CSS. You may like an additional source to learn how to add text to an element using CSS.