Как увеличить кликабельность ссылок с помощью CSS?

Уверен, что какой смертный захочет на порядок увеличить CTR ссылок, тем самым повысив свои доходы.

Каждый хочет больше CTR на их страницы. Turk Hit Box провел небольшой эксперимент результаты которого позволили повысить CTR ссылок на 20%. Он использовал графический элемент для оформления ссылок (небольшие иконки), что привело к повышению дохода с рекламы.

Давайте рассмотрим саму реализацию с помощью CSS. Ниже опишу несколько примеров.
Используя псевдоэлементы :after и :before
При этом графический файл external.gif будет отображаться после каждой ссылки.

a:link:after {
content: url(external.gif)
}

Более расширенный пример с использованием :after и :before
Ссылки, для которых установлен nofollow будут обозначены темно красным черепом, а те для которых установлен tag будут обозначены иконкой Technocrati.

a[rel~="nofollow"]::after {
    content: "\2620";
    color: #933;
    font-size: x-small;
}
 
a[rel~="tag"]::after {
    content: url(http://www.technorati.com/favicon.ico);
}

Внешние ссылки можно отметить автоматически.
Многие использует нестандартное значение rel="external", чтобы выделить ссылки на внешние сайты, добавлять его к каждой ссылке трудоемкая и необязательная работа. Следующее правило добавляет стрелку после каждой ссылки ведущей на внешний сайт.

a[href^="http://"]:not([href*="вашсайт.ru"])::after {
    content: "\2197";
}

А вот сейчас я многих огорчу. Псевдоэлементы :after и :before не поддерживаются браузером IE 5.5, 6.0 и 7.0 тоже, но пользователи Netscape, Opera, Safari, Mozilla и Firefox могут его спокойно использовать.

Как быть IE-никам?
Есть решение и для IE всех версий. Можно тупо поставить после ссылки картинку.

Решение для владельцев WordPress, плгин от Metrod.ru
Он очень простенький, так что привожу код здесь:

<?php
/*
Plugin Name: Add Image After Link
Plugin URI: http://www.metrod.ru
Description: Added image after all links in post.
Version: 1.0
Author: Denis Krupin
Author URI: http://www.metrod.ru
*/
function add_image_tolink ($text) {
    return str_replace('</a>', '</a> <img src="http://вашсайт/путь-к-файлу.gif" width="11" height="11">',  $text);
}
add_filter('the_content', 'add_image_tolink');
?>

Скачать иконку (81 байт)