Question

我在使用href属性的锚元素上插入文本时遇到问题：

<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。

不断重复

Answer 1

将background-image伪元素的图片设为:after，或从url(path)属性中移除content以外的任何内容。 content应包含url()函数中包含的字符串（或字符串）或图像的网址（然后图像将像真正的IMG元素一样插入）。

考虑到，要使生成的伪元素可见（如果您将使用background-image而不是content: url(path)），content属性应至少包含空字符串（"" ）无论如何。

Answer 2

内容仅接受文字。对于特殊包机，如空间，您必须使用十六进制格式。我改变它就像跟随和工作。但是为了增加宽度，重复空格十六进制（\ 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"
}

如何使用CSS在html元素中插入文本之后的内容？

2 个答案: