css - CSS 中的内容属性

Question

在一些模板中，我看到一个用 CSS 创建的箭头。像这样:

div:after{
    content:"\f107";
}

此代码显示如下箭头:

这是什么代码？我在哪里可以找到更多代码？

Answer 1

使用 content 属性在元素中嵌入虚拟内容，它与伪 :before 或 :after 一起使用，所以如果你使用:before，内容将被嵌入之前。

来自 MDN :

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

内容属性可以包含任何 character , number , entities .更多信息可以引用一篇文章here .

另外，您可以获得一个方便的转换器 here .

---

这个方法也被font-awesome使用了- Example和其他相关的 svg 字体嵌入库，您可以在其中简单地调用元素的类，字体将被虚拟嵌入。

---

此外，只是附带信息，使用 CSS content 属性生成的内容默认为 inline，这也是呈现的 inside元素而不是外部..