~rsapkf

Targeting external links using SCSS

Jul 21, 2020 · 1 min read · Last updated: Aug 17, 2020

Here is part of the snippet I use to target external links on this site:

Check out the source here (feel free to copy the entire thing).

a {
  // ... link styles

  // Target external links
  // If you want to indicate websites with specific icons, make sure you add them here
  // If using FontAwesome icons, font-family and font-weight need to be set based on whether you are using Brand or Regular icons
  // https://fontawesome.com/v5.0.13/how-to-use/on-the-web/advanced/css-pseudo-elements
  &:not([href*='rsapkf.xyz']):not([href^='/']):not([href^='#']):not([href*='mozilla.org']):not([href*='github.com'])::after {
    content: '\f35d'; // or url(/img/external-link.svg) ...
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }

  &::after {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    color: rgb(85, 78, 78);
    font-size: 0.7rem;
    padding: 0.15rem;
    position: relative;
    bottom: 0.2rem;
  }

  // Now, add individual icons from FontAwesome (https://fontawesome.com/cheatsheet)
  &[href*='mozilla.org']::after {
    content: '\f269';
  }

  &[href*='github.com']::after {
    content: '\f09b';
  }
}

You'll also notice some links do a bumpy animation thing on hover. These are links with target attribute set to _blank. Here is how to do it:

a {
  // ... link styles

  // Target links with target attribute
  &[target^='_blank']:hover::after {
    position: relative;
    bottom: 0.5rem;
    transition: ease 0.2s;
  }

Further reading