CSS Style to use with UserStyles, which makes the GAFA links stand out

GafaLinks.scss

/** 
 * Done after the GAFA Links extension for Firefox by Baptiste Gelez:
 *  - Firefox extention: https://addons.mozilla.org/fr/firefox/addon/gafalink/
 *  - Source:            https://framagit.org/Bat/gafalink
 *  - Userstyle page:    https://userstyles.org/styles/149959/gafa-links-that-stand-out
 * 
 * Note that this style is designed for people that want to test the extension but don't use Firefox. It will not be
 * as customizable as the original one.
 * 
 * You can generate your output yourself, online, using the Sass sandbox:
 * https://www.sassmeister.com/
 * Just copy the content of this file in the SCSS panel (left), then copy the result in your userStyles
 */

// Website links
$list: (
  "1000minds.com",
  "aliexpress.com",
  "aliexpress.fr",
  "amazon.com",
  "amazon.fr",
  "apple.com",
  "azure.com",
  "bing.com",
  "bing.fr",
  "bit.ly",
  "bitly.com",
  "blogger.com",
  "blogspot.com",
  "bubbl.us",
  "calameo.com",
  "cdnjs.cloudflare.com",
  "cloud.orange.fr",
  "codepen.io",
  "dailymotion.com",
  "deezer.com",
  "deezer.fr",
  "del.icio.us",
  "discord.com",
  "doodle.com",
  "dropbox.com",
  "eventbrite.com",
  "eventbrite.fr",
  "evernote.com",
  "facebook.com",
  "facebook.fr",
  "flickr.com",
  "foxmarks.com",
  "getpocket.com",
  "github.com",
  "gmail.com",
  "goo.gl",
  "google.com",
  "google.fr",
  "imgur.com",
  "instagram.com",
  "instapaper.com",
  "jsfiddle.net",
  "le-cloud.orange.fr",
  "linkedin.com",
  "live.com",
  "mappy.com",
  "mappy.fr",
  "microsoft.com",
  "microsoftonline.com",
  "netflix.com",
  "office.com",
  "office365.com",
  "onedrive.com",
  "openagenda.com",
  "outlook.com",
  "overblog.com",
  "padlet",
  "pastebin.com",
  "periscope.tv",
  "pinterest.com",
  "pinterest.fr",
  "pscp.tv",
  "reddit.com",
  "reddit.fr",
  "shrtct.com",
  "skype.com",
  "slack.com",
  "snapchat.com",
  "soundcloud.com",
  "sourceforge.com",
  "sourceforge.net",
  "spotify.com",
  "spotify.fr",
  "taobao.com",
  "tinder.com",
  "transifex.com",
  "trello.com",
  "tumblr.com",
  "twitch.tv",
  "twitter.com",
  "viadeo.fr",
  "viamichelin.com",
  "viamichelin.fr",
  "vimeo.com",
  "wetransfer.com",
  "whatsapp.com",
  "windowsazure.com",
  "xmarks.com",
  "yahoo.com",
  "yandex.com",
  "yandex.fr",
  "yandex.ru",
  "youku.com",
  "youtu.be",
  "youtube.com",
  "zoho.com"
);
// Selectors
$before:  ();
$link:    ();
$visited: ();
$hover:   ();

// Creating selectors lists
@each $site in $list {
  $before: $before unquote('a[href*="#{$site}"]:before');
  $link: $link unquote('a[href*="#{$site}"]');
  $visited: $visited unquote('a[href*="#{$site}"]:visited');
  $hover: $hover unquote('a[href*="#{$site}"]:hover');
  // Add a coma if not the last item in the list (https://hugogiraudel.com/2013/07/15/understanding-sass-lists/)
  @if $site != nth($list, length($list)) {
    $before: $before unquote(",");
    $link: $link unquote(",");
    $visited: $visited unquote(",");
    $hover: $hover unquote(",");
  }
}

// userstyle spec:
@namespace url(http://www.w3.org/1999/xhtml);

// a:before
#{$before} {
  content: '\2620';
  margin-right : .2em;
  text-decoration: none !important;
}

// a
#{$link} {
  background-color: black;
  color: red;
  border-radius: 3px;
  padding: 0 .2em;
  -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
  filter: blur(1px);
}

// a:visited
#{$visited} {
  color: orange;
}

// a:hover
#{$hover} {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
  opacity: 1;
}