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).Usage
We can also reference attributes from the tag byattr().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]";
}