如何在使用CSS的HTML元素中的文本之後插入內容？

我有一個具有href屬性的錨元素插入文本的一個問題：如何在使用CSS的HTML元素中的文本之後插入內容？

<a href="myfile.pdf"> Contact Us</a>

我想寫的CSS，使聯繫我們後，圖標顯示和任何錨標記內的任何文字：

a[href$=".pdf"]:after { 
width: 16px; 
height: 16px; 
content: url('/_assets/img/document-type-icons-2.png') no-repeat -84% 0; 
}

它不是這樣工作的。我怎樣才能寫我的CSS來實現這一點？

好吧，我得到它的工作，但我怎麼樣式背景屬性，如無重複和-84％0

它不斷重複

來源

2013-03-26 Amen Ra

你能提供[小提琴]（http://jsfiddle.net/）？這對我來說是正確的。 – Bill 2013-03-26 17:28:35

@BillyMathews同意。對我來說在這裏工作得很好：http://jsfiddle.net/rY4R6/ – 97ldave 2013-03-26 17:32:15

另外，使用屬性選擇器時可能會看到兼容性因素：http://www.quirksmode.org/css/selectors/在事件中您正在拍攝IE 6兼容性。 – djthoms 2013-03-26 17:55:25

任一組圖片作爲background-image您:after pseudoelement或刪除任何東西除url(path)從content財產。 content應該包含一個字符串（或字符串）或包裝在url()函數中的圖像url（然後圖像將像實際的IMG元素一樣插入）。

要考慮到，使產生的pseudoelement可見（如果你會用background-image代替content: url(path)），content屬性應包含至少空字符串（""）反正。

來源

2013-03-26 17:50:47

內容只接受文本。對於像空間那樣特殊的章程，你必須使用十六進制格式我改變它像後續工作。但爲了增加寬度，重複十六進制空格（\ 00a0）。

a[href$=".pdf"]:after { 
background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32/file_extension_pdf.png') ; 
width: 40px; 
height: 40px; 
content: "\00a0\00a0\00a0\00a0\00a0" 
}

來源

2013-03-26 18:03:01

如何在使用CSS的HTML元素中的文本之後插入內容？

回答

相關問題