Link Icon to External Sites

In this example below you will see how to do a Link Icon to External Sites with some HTML / CSS and Javascript

A style for links to external sites

Thumbnail
This awesome code was written by mdd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mdd ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Link Icon to External Sites</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>I'm a sentence and I include both <a href="https://codepen.io">internal links</a> and <a href="https://rwd.is">external links</a> but the external links are easy to visually identify because they've got a little arrow.</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mdd/link-icon-to-external-sites-Ogqpab */
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;
}

/* Style for links to external sites */
a[href*="//"]:not([href*="codepen.io"]):after {
  content: "\21B8";
  /* display has to be inline-block or block to transform psuedo-elements */
  display: inline-block;
  position: relative;
  font-size: 0.6em;
  vertical-align: super;
  margin-left: -0.1em;
  transform: scale(-1, 1);
}

Comments