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

Question

我在具有 href 属性的 anchor 元素上插入文本时遇到问题:

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

我正在尝试编写 css 以使图标出现在联系我们之后以及任何 anchor 标记中的任何文本:

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

为您的 :after 伪元素将图像设置为 background-image 或从 content< 中删除除 url(path) 之外的任何内容 属性。 content 应该包含一个字符串(或多个字符串)或包裹在 url() 函数中的图像 url(然后图像将像真正的 IMG 元素)。

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