A callout has a background and an icon.
This sample p element is a callout.
An optional dataset attribute, data-icon,
may be specified to override the default emoticon, included via
an absolute positioned ::before pseudo-element.
This callout overrides the data-icon.
a element.
Example:
Wikipedia
A Mention without a data-icon
defaults to the "link" emoji.
Example:
Wikipedia
Notion replaces those Element icons with the favicon of the target site,
this is more advanced and the "naive case" means sending requests to fetch
favicons for linked websites which is probably not good for the user.
A better solution, probably similar to what Notion does, is to periodically
cache popular websites favicons and use this icon set across the site.
A grid of 32x32 favicons, for the top 1000 more visited websites, would be
just a single 1024px-wide square image.
Bubbles is a class to make select elements stand out.
It overrides the inline displays
and slightly change semantics.
The ::before pseudo-element
is used to add a label to the element.
i result.
mark result.
qelement result, withciteprovided.
blockquote, nociteprovided.
samp result.