CSS 自定連結圖像

使用 CSS 於 連結後面 加入 icon 的方法。

css 標的標籤 {
 padding-right:18px; /*預留圖像空間*/
/*指定圖像*/
 background:transparent url(圖像位址) no-repeat center right;
}

a[title]

擁有屬性 "title" 的 a 標籤。

<a href="url" title="test"></a>

a[title="javascript"]

擁有屬性 "title" 值為 "javascript" 的 a 標籤。

<a href="url" title="javascript"></a>

a[title^="javascript"]

擁有屬性 "title" 值開頭為 "javascript" 的 a 標籤。

<a href="url" title="javascript is a tag"></a>

a[title$="javascript"]

擁有屬性 "title" 值結尾為 "javascript" 的 a 標籤。

<a href="url" title="tag as javascript"></a>

a[title*="javascript"]

擁有屬性 "title" 值含有 "javascript" 的 a 標籤。

<a href="url" title="LT_javascript"></a>

a[title~="javascript"]

擁有屬性 "title" 值含有 "javascript" 單字的 a 標籤。

<a href="url" title="some javascript example"></a>

a[title|="javascript"]

擁有屬性 "title" 值含有 "javascript" 或 "javascript" 附帶 "-" 符號的單字的 a 標籤。

<a href="url" title="javascript"></a>

<a href="url" title="javascript-powerful"></a>

這個選擇符用來指定語系色彩應該很好用。

使用 Firefox 的可以將規則寫到 userContent.css 之中，用以掌控網頁上的連結標示圖像。

Update:2008-01-23

增添 |= 選擇符簡便說明及範例