Styling Exterior Hyperlinks with Attribute Selectors

You would possibly discover on some web sites you go to that exterior hyperlinks show slightly icon subsequent to them. That is tremendous useful for customers, because it lets them know that the hyperlink goes to take them someplace off-site.

I’ve only recently applied customized styling for exterior hyperlinks inside posts on this web site. The excellent news is we don’t must append a particular class to exterior hyperlinks or alter the markup in any means. We are able to merely use an attribute selector.

Utilizing attribute selectors

CSS permits us to fashion HTML parts primarily based on their attributes by wrapping them in sq. brackets. For instance, we will fashion any ingredient with the hidden attribute to have a show property of none:

[hidden] {
  show: none;
}

We are able to additionally fashion parts when the attribute equals a specific worth. For kind parts, we may fashion explicit enter sorts with out having to make use of a category:

enter[type="checkbox"] {
  accent-color: deeppink;
}

For our exterior hyperlinks we wish to apply the styling when the href attribute incorporates a hyperlink to an exterior web site. We don’t know precisely what that worth might be (and it wouldn’t be sensible so as to add every particular person URL to our stylesheet!), however we all know that inner hyperlinks (hyperlinks to different posts on the location) will start with a slash, whereas exterior hyperlinks will start with https://. So we will fashion solely the hyperlinks that start with http by inserting a ^ character into our attribute selector:

a[href^='http'] {
  /* Types for exterior hyperlinks */
}

Alternatively we will use different operators to find out totally different styling circumstances:

/* Matches the URL exacly */
a[href="https://css-irl.info"]
{
}

/* Has 'css' wherever within the URL */
a[href*='css'] {
}

/* Ends with .information */
a[href$='.info'] {
}

/* Class incorporates the phrase 'hyperlink' */
a[class~='link'] {
}

Moreover, by including s or i earlier than the tip bracket we will management whether or not they’re in contrast case-sensitively or insensitively:

/* Case delicate */
a[href*='css-irl' s] {
}

/* Case insensitive */
a[href*='css-irl' i] {
}

Styling the pseudo ingredient

For our exterior hyperlinks, we’ll append an icon by styling a pseudo ingredient. Right here we’re utilizing the content material property with a base64 encoded SVG, because the icon could be very easy. However you might use a picture URL, one other character, or an emoji. We are able to add a small margin to place it barely away from the textual content.

a[href^='http']::after {
  content material: url("knowledge:picture/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewbox='0 0 12.2 12.2' width="14" top="14"%3Epercent3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3Epercent3Cpath fill="none" d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3Epercent3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3Epercent3C/svgpercent3E");
  margin-left: 0.25em;
}

One drawback with utilizing content material with an SVG is we don’t have full management over the scale of the icon. It makes use of the intrinsic dimensions of the SVG. If we wish to apply the icon to any exterior hyperlink no matter font dimension (e.g. a heading), we could be higher off utilizing the background-image property. We are able to set a width and top (in ems, that are relative to font dimension), and use background-size to make sure our SVG covers your entire space.

We have to set the content material property to an empty string, in any other case the pseudo ingredient gained’t render. We additionally must set the show property to inline-block.

(Word: I’m utilizing a customized property for the picture URL, for brevity.)

a[href^='http']::after {
  content material: '';
  show: inline-block;
  width: 1em;
  top: 1em;
  margin-left: 0.25em;
  background-size: 100%;
  background-image: url(--var(svgUrl));
}

Stopping an ”orphan” icon

There’s another factor we will enhance about this strategy. Presently it’s attainable for the icon to wrap onto the following line of textual content, leaving an undesirable orphan icon all by itself.

If we add place: absolute to the pseudo ingredient, and a little bit of proper padding to the anchor ingredient, then the icon won’t ever wrap by itself.

a[href^='http'] {
  padding-right: 1.25em;
}

a[href^='http']::after {
  place: absolute;
  content material: '';
  show: inline-block;
  width: 1em;
  top: 1em;
  margin-left: 0.25em;
  background-size: 100%;
  background-image: url(--var(svgUrl));
}

Right here’s the complete code:

See the Pen
Untitled by Michelle Barker (@michellebarker)
on CodePen.