rsapkf

Targeting External Links using SCSS

July 21, 2020 | 1 min read | #css, #scss, #programming| permalink

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 {
    content: "\f360";
    position: relative;
    bottom: 0.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: ease 0.1s;
  }


Learn more:
Last Updated: August 17, 2020
← Previous
Implementing /projects Page on Gatsby Site with GitHub API
Next →
Deploying mdBook Site on Netlify

Got suggestions or feedback ? Contact me!