Displaying an Icon After a Link Using CSS

Adding an icon after a link using CSS is a useful technique for indicating external links, downloads, or special actions. This can be done using the ::after pseudo-element along with the content property to insert an image or icon.

In the following example, we use content with url() to add an icon after the link. Below is the basic CSS code:

</>
Copy
/* Add an icon after all links */
a::after {
  content: url("https://www.tutorialkart.com/cdn/outlink.png");
  margin-left: 5px;
}

Examples

Example 1. Adding an Icon After All Links

In this example, we add an icon after all links using the ::after pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a::after {
      content: url("https://www.tutorialkart.com/cdn/outlink.png");
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Visit Example</a></p>
</body>
</html>

Output:

Example 2. Adding an Icon After External Links Only

In this example, we only add the icon after external links (links that open in a new tab or go to another domain) by using the [target="_blank"] attribute selector.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a[target="_blank"]::after {
      content: url("https://www.tutorialkart.com/cdn/outlink.png");
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" target="_blank">External Link</a></p>
  <p><a href="/internal-page.html">Internal Link</a></p>
</body>
</html>

Output:

Example 3. Customizing the Icon with Size and Position

In this example, we adjust the size of the icon and position it correctly by using width and vertical-align properties.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a::after {
      content: "";
      display: inline-block;
      background-image: url("https://www.tutorialkart.com/cdn/outlink.png");
      background-size: contain;
      width: 16px;
      height: 16px;
      margin-left: 5px;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com">Styled Icon After Link</a></p>
</body>
</html>

Output:

Conclusion

Using CSS, you can easily add an icon after a link to indicate external links, downloads, or special actions. The ::after pseudo-element combined with content: url() or background-image allows flexible customization. Experiment with different styles and icons to match your website’s design!