External link indicator with CSS

external-link.css

body {margin: 1em;}

a, a:visited { color: blue;
text-decoration: none;}

a:hover {
  border-bottom: 1px solid;
}

a[href*="//"]:not([href*="codepen.io"]) {
    /* external link styles, use :before or :after if you want! */
  color: coral;
  &:after {
  content: "\2192";
    font-size: 0.6em;
    vertical-align: super;
    margin-left: -0.1em;
    display: inline-block;
    position: relative;
    transform:  rotate(-45deg) scale(1, 1);
  }
}

Source from: https://codepen.io/justincavery/pen/rwPpbP

Character codes: https://brajeshwar.github.io/entities/