You're welcome to do that in print media, but on the web the proper way is the abbr element with its title attribute <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...>. Related to the distinction, I'd bet $1 there's some fancy CSS that would actually expand the definition under @media print
I can attest the abbr is also mobile friendly, although I am for sure open to each browser doing its own UI hinting that a long-press is available for the term
Sadly abbr with title doesn't work at all on mobile Chrome [1] or Firefox [2]. Probably not Safari either, since long press on mobile means "select text" so you'd have to do some CSS trickery (and trying to hit a word-sized target with a finger is quite annoying).
[1] https://issues.chromium.org/issues/337222647 -> https://issues.chromium.org/issues/41130053
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1468007
Please read your own link. It literally says to put the definition in parentheses (same as print) on first use. Second paragraph.
<abbr> is not what you seem to think it is. But the "typical use cases" section of your link does explain what it's actually for.
From your source:
> Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
> Only include a title if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.