This website is still under construction.

Virtual selectors ::before and ::after are used to create HTML elements from CSS.
It is done by content: ""; property in those selectors (cannot be used anywhere else).


We can also reference attributes from the tag by attr().
That allows us to add surfix to links with their src (sadly, there is no CSS-only way to add only hostname).

I myself use url() in those virtual selectors to add small image for remote links.
a[href ^= "http://"]::after, a[href ^= "https://"]::after { content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); }
I do not own the image but found it free on Stack Overflow.

I also have CSS to add surfix for some file types (by extension) like PDF:
a[href $= ".pdf"]::after { content: " [PDF]"; }