AO3 should have an Annotation Mode where you can click to view all of the author's commentary and thoughts about certain parts of the work. A little comment that says "I spent five hours researching vintage radio mechanics for this and didn't even end up using it" or "this is an ancient Hebrew literary technique!" would make my day
Good news, you can do this. You just need to learn and play around with html formatting a bit. Here's a great guide on AO3 of what you can do on the site that isn't immediately available by clicking a button on the upload page. I suggest Chapter 6, but I'll give you a quick and easy example from it. This works on both desktop and mobile, I just tested it.
So imagine you've pasted your fic into the Rich Text option at the bottom of the upload page and you want to add your annotation. (I'm using the dropdown option because it's so easy peasy and mobile friendly, but there are others.) Click the HTML button at the top-right of the Work Text section.
Find the lines of text you want to squeeze your annotation between. [Enter] to make space. And you're going to type:
<details><summary>Whatever you want the header to say</summary>Whatever you want the additional text to say</details>
(In html formatting, you'll have one command at the start telling it what to do and a second command at the end with a slash to tell it you're finished and closing out.)
So for my example if I put:
<details><summary>Side Note:</summary>I wanted to mention something here.</details>
My fic will look like this. (I use dark mode.)
And it will behave like...
Your readers can collapse it again after reading. You don't have to put header text ("Side Note:") if you think that's too distracting. Do a hyphen or something else small between the summary command if you want. Your choice.
Note that this would also be good formatting if you want to include warnings for your fic but don't want to spoil anything, thus making it optional for people to click the dropdown at their discretion.
There is A Lot you can do with html formatting on AO3. I recommend glancing over that guide. And others. Also just any site detailing html. Might work on AO3, might not, but you can try.
So, I was feeling rather grumbly about the <details> option forcing the annotation into a new line and thus breaking the text flow. But as I was complaining to @perchingowl about that (because xe got me into coding so xe gets to listen to my whining) I realised that nothing keeps me from putting the whole paragraph in the <summary> part!
After playing around with it a bit I've settled on this:
<details><summary>text of the paragraph</summary>
<blockquote><em>annotation</em></blockquote></details>
As you can see it also works on mobile:
I added the blockquote and emphasis tags to differentiate the annotation from the rest of the text. Unlike La_Temperanza's hover method, which was mentioned most often in the notes, this one doesn't require a workskin, allows for longer commentary, and, most importantly, it works on mobile, without moving the clicked line to the top of your window!
Big caveat: <details> only works if the user is reading on ao3! If they download the fic as epub, all text will be there but only the <em> tags survive. If they download it as pdf the whole annotation vanishes and the arrow becomes unclickable!
(A variation of mackerel_cheese's workskin-based option may be better suited for that, but I'm now too tired to wrangle CSS, so I'll save that for another day.)
