Выбор на основании конкретного значения + псевдоэлемент

[Delat]

Как сделать, чтобы у внешней ссылки позади нее, размещенной в теле статьи, был значок в виде изображения (например, как на сайте htmlbook.ru) ?

Я хотел было сделать так, но не работает.

a[rel=nofollow]:after {content: ""; background-image: url(../images/template/blank.png);}

Подскажите изящный вариант :-)

[lexxcode]

добавьте к тому что вы написали еще, например, display:inline-block; и размеры.

Вроде такого

a[rel=nofollow]:after {
  content: "";
  background-image: url(../images/template/blank.png);
  width: 16px;
  height: 16px;
  display: inline-block;
}

[SelenIT]

В принципе, можно вставить картинку прямо в content:

a[rel=nofollow]:after {content: url(../images/template/blank.png); }

Но вариант alexriz гибче и практичнее.

[CoDy]

Если для внешних ссылок не проставляется rel, тогда можно навешивать стили на основании значения параметра href, я так делал:

a[href^="http://"] {
  /* повесить стили на все внешние ссылки и внутренние, с указанием абсолютного урла  */
  padding-right: 12px;
  background: url("external-link.gif") no-repeat scroll right top transparent;
}
a[href^="http://mysite.com"],
a[href^="http://www.mysite.com"] {
  /* убрать стили внутренних ссылок */
  padding-right: auto;
  background: none;
}