Skip to Main

E-Wizard: CSS Snippets

Used to be a site for my unpublished userstyles, now has any CSS snippet I find useful. I feel like putting outright code snippets is really limiting how much I actually like maintaining this page, so here's a short list of things I'd like people on Neocities to know.

This one gets to be a stand-alone! Anyone using AO3 on mobile has probably run into people who use hover text to convey additional information, but that doesn't work on mobile. Thanks to modern CSS, though, you can still use styles to insert the contents of the title attribute in the :after pseudo-element, like this:

#workskin [title]::after { content: " (" attr(title) ")"; }

What it does is selects every element that has a title attribute, so long as it's in the #worksin, or fanfic body. It grabs the pseudo-element ::after the thing with the title, and puts the attr(title) (get attribute: title) in between round brackets. Because of limitations of CSS, you can't select the text that it inputs, because it's not technically part of the document or something? It's a weird thing that comes about because of the "separation of concerns" I think.