External Link Styling Issue: Please Help

HTML & CSS
1

Hi, I have created an external link icon style for my external links. However, I want to be able to exclude certain selected external links from having this style applied. And that’s what I can’t figure out…

I have this code:

a[href^=“http://”]:not([href*=“domain.com”]):after {
content: “” url(‘/wp-content/uploads/images/external-link-icon-blue.png’);
}

That adds the external link icon. Then with this code I attampt to exclude the above style from certain links:

.noExternalStyle:after {
content: “” url(‘’);
}

But that doesn’t work…

How can I make the thing I’m attempting to do there work? … I mean, how can I exclude certain links from having the external link icon added to them?

2

What’s the criteria? What differentiates these links from others.

3

There’s no specific criteria, it’s just that some links I don’t want to have this style applied to and I like to be able to add a class to them that removes that default external style from them

4

You can chain not() selectors if you wish, so that might be an option.

The code you posted (content: "" url('');) isn’t proper CSS, though, so keep than in mind (in case it wasn’t a typo).

5

Can you show me how I would do that? My CSS is a bit rusty, and I got the original external link icon code from a code snippet online.

6

I’d probably be inclinded to do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

a[href^="http://"]:not([href*="domain.com"]):not([href*="sitepoint.com"]) {
  background: url('/wp-content/uploads/images/external-link-icon-blue.png') no-repeat 100% 50%;
  padding-right: 30px;
}

</style>
</head>
<body>

<a href="index.html">Home</a>
<a href="http://sitepoint.com">SitePoint</a>
<a href="http://domain.com">Domain</a>
<a href="http://google.com">Google</a>

</body>
</html>
7

Ah ok, but that’s not what I want to do, I want to be able to assign a class to an external link that will then remove the external link icon that’s normally added to external links.

8

Not possible in CSS.

You could use Ralphs targetted CSS to then override the icon and set background-image:none;.

If you literally want another class on there, then you can’t do that dynamically in CSS> However you can just find what links you need to target and override it.

9

Sounds like a pretty long-winded way to do something pretty simple to me.

Perhaps you need to describe in more detail how you envisage this working. Are you picturing some kind of CMS setup where you add a link and click a button to set the styling? I just can’t quite understand what you are trying to do here (from a practical standpoint).

As said, you can get the end result you want with CSS alone. If you want something more sophisticated, like adding classes etc., then you might need to turn to JS or a backend solution.

10

Hi,

If you are simply adding a class manually to the links you want to exclude then you just need to do this:

  a.noExternalStyle:after{display:none}

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

a[href^="http://"]:not([href*="domain.com"]):after {
    content:"";
  background: url(http://placehold.it/20x20) no-repeat 100% 50%;
  padding-right: 30px;
}
a.noExternalStyle:after{display:none}

a{margin:10px;display:block}
</style>
</head>
<body>

<a href="index.html">Home</a>
<a href="http://sitepoint.com">SitePoint</a>
<a href="http://sitepoint.com">SitePoint</a>
<a class="noExternalStyle" href="http://sitepoint.com">SitePoint with no icon because of class added</a>

<a href="http://domain.com">Domain - no icon on domain.com via href attribute</a>
<a href="http://google.com">Google</a>

</body>
</html>
11

Thanks, works like a charm! :smiley:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.