如何在使用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元素中的文本之后插入内容？

回答

相关问题