Displaying an Icon Before a Link Using CSS

Adding an icon before a link using CSS helps visually differentiate external links, downloads, or special actions. This can be achieved using the ::before 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 before the link. Below is the basic CSS code:

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

Examples

Example 1. Adding an Icon Before All Links

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

index.html

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

Output:

Example 2. Adding an Icon Before External Links Only

In this example, we add the icon before only 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"]::before {
      content: url("https://www.tutorialkart.com/cdn/outlink.png");
      margin-right: 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:

Conclusion

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