Work Header

How to Make Invisible Text (That Can Be Highlighted)

Chapter Text

Highlight the following for spoilers: You're awesome and I hope you have an amazing day. :D


First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:

EDIT 1/1/18 Thanks to GoldenFalls for pointing a much easier way to do this than the previous code!

#workskin .invisible {
color: rgba(0, 0, 0, 0);

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the invisible text. Now to implement it.

Go to your the work you want the invisible text, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", find where you want invisible to be located, and paste the following code:

Text before the invisible text:<span class="invisible"> Invisible text here</span>

If you want an entire paragraph hidden, you could use <p class="invisible">Invisible paragraph here.</p> instead.


Like mentioned before, I have yet to find a way for this to work on mobile. So if you're using this in the middle of your work, I would recommend putting something at the top (say the notes at the beginning) suggesting that mobile users hit "Hide Creator's Style" before reading. Or, if you are familiar with anchor links (used in the Linked Footnotes tutorial), you can even create a link for a mobile user to click to see the message. For example, if we used the beginning example but added a mobile link:

Highlight the following for spoilers: [ click if on mobile ]You're awesome and I hope you have an amazing day. :D

Then the coding would be something like:

<a name="mobile1" id="mobile1"></a>Highlight the following for spoilers: <sup>[ <a href="[AO3WORKIDHERE]?style=disable#mobile1" title="click to see message on mobile">click if on mobile</a> ]</sup><span class="invisible">You're awesome and I hope you have an amazing day. :D</span>

Make sure you change the AO3 work ID to the number that corresponds with your work. Like this work's ID is "5046274", so the full URL is "". Of course, once the style is hidden, it will remain hidden for any other instances where you might have invisible text.