CSS and rel=sponsored

Examples to mark rel=sponsored links with CSS. Sponsored links are also known as “affiliate links” and often marked with (A). Unfortunately, some sites do not mark them at all.

Dreamhost

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

Dreamhost

[rel=sponsored]:after {
  content: " (A)";
  font-variant-position: super;
}

Dreamhost

[rel=sponsored]:after {
  content: " (A)";
  font-size: .75em;
  font-variant-position: super;
}

Dreamhost

[rel=sponsored]:after {
  content: "(A)";
  font-variant-position: super;
  margin-left: .25em;
}

Dreamhost

[rel=sponsored] {
  position: relative;
}
[rel=sponsored]:after {
  content: "(A)";
  font-size: .75em;
  position: absolute;
  right: 1.25em;
  top: -0.25em;
}

Dreamhost

<a href="https://www.dreamhost.com/r.cgi?240827" rel="nofollow sponsored">Dreamhost</a>

<style>
[rel=sponsored] {
  position: relative;
}
[rel=sponsored]:after {
  content: "(A)";
  font-size: .75em;
  position: absolute;
  right: 1.25em;
  top: -0.25em;
}
</style>

Dreamhost

<a href="https://www.dreamhost.com/r.cgi?240827" rel="nofollow sponsored">Dreamhost</a>

<style>
[rel~=sponsored] {
  position: relative;
}
[rel~=sponsored]:after {
  content: "(A)";
  font-size: .75em;
  position: absolute;
  right: 1.25em;
  top: -0.25em;
}
</style>