Using CSS for rel=sponsored links

Recently, Google announced the rel=sponsored HTML attribute as an alternative to the rel=nofollow attribute. This adds transparency for visitors of your website. And this avoids that Google removes the site from their search index for spammy behaviour.

The announcement states: Use the sponsored attribute to identify links on your site that were created as part of advertisements, sponsorships or other compensation agreements.

Using a rel attribute is not visible, so visitors are not informed. You could add text to each sponsored link. Luckily you can use CSS to achieve this, because you can style elements by attribute. For example, you can add a background image.

[rel=sponsored] {
  background-image: url(sponsored.png);
  background-repeat: no-repeat;
}

Often a sponsored link is indicated with an (A), meaning “affiliate link”. This can also be done with CSS using an :after pseudo-element. Advantage is that you can use real text. Both :after (=CSS2) and ::after (=CSS3) are valid.

[rel=sponsored]:after {
  content: " (A)";
}

Using a pseudo-element has the advantage that you can style it separately from the link.

You can combine rel-attributes, for example rel="nofollow sponsored". This way you can still support search engines that do not know the “sponsored” attribute. In CSS this works not out of the box. Fortunately attribute selectors have a solution available. In this case you have to add the tilde sign to get the same result as before.

[rel~=sponsored]:after {
  content: " (A)";
}

Of course, you can mark sponsored links differently, depending on your design or a type of links. You might want to style banners differently from content links. That is what CSS classes are for.

Visit my demo page to see some examples for styling rel=sponsored links with CSS.