如何在未知寬度的文本右側使用精靈？

Question

考慮下面的例子： http://cl.ly/2UAa

如何使用精靈的「看到更多...」線的右側，以便它總是與文本的寬度調整？我應該創建一個單獨的元素，將隨文本浮動，或者有一種方法可以直接在鏈接中執行。

Answer 1

你可以將它應用到鏈接的背景，對齊它並給鏈接一個正確的填充。

a { 
    background: url(image_url) no-repeat right center; 
    padding-right: 80px; // 80 pixels example 
} 

Answer 2

我最喜歡的方法是使用僞元素並將圖像設置爲內容;

a:after { 
    content: url(path/to/image.png); 
} 

您還可以在元素之前創建僞元素，或者使用文本而不是圖像作爲內容;

a:before { 
    content:' \25BA'; 
} 

\ 25BA是CSS escape character爲箭頭的權利，但你可以把引號的任何文本。

當然，您也可以使用jeroen建議的背景方法，並且這兩種方法都適用於不同的情況。