CSS中的内容属性

Question

在某些模板中，我看到使用CSS创建的箭头。是这样的：

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

这段代码显示这样一个箭头：

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

Answer 1

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

从MDN：

的content CSS属性用于与::before和::after 伪元素，以生成式中的元件的内容。插入对象 使用content属性是匿名replaced elements。

内容属性可以容纳任何character,number,entities。欲了解更多信息，你可以参考文章here。

此外，你可以得到一个方便的转换器here。

---

这种方法也被font-awesome - Example等相关SVG字体嵌入库，在那里你可以简单地调用类的元素和字体都将嵌入虚拟。

---

而且，只是一个侧面的信息，使用CSS content属性生成的内容是inline默认情况下，这也呈现inside的元素，而不是外界..

Answer 2

这是一个escaped unicode character。

Answer 3

CSS content属性：内容属性用于：before和：after伪元素之后，插入生成的内容。

Read more

Answer 4

至于其他的答案已经解释的那样，CSS规则使用content财产由其Unicode数字插入字符。

但是，使用的字符是U + F107 PRIVATE USE CHARACTER -F107。这意味着它除私人协议外没有任何意义，不应该用于公共信息交换。不幸的是，一些“真棒”技巧使用私人使用代码点来插入图形符号。这意味着，除非使用特定的字体，并使用分配给这些代码点的某些符号，否则会出现未知字符的通用符号。

因此，在正确的内容中使用图片要安全得多。

Answer 5

CSS有一个名为content的属性。它只能与伪元素:after和:before一起使用。它被写为一个伪选择符（带有冒号），但它被称为伪元素，因为它实际上并未选择页面上存在的任何内容，而是向页面添加了新内容。

Font Awesome是一种网页字体，包含来自Twitter Bootstrap框架的所有图标，现在还有更多。

你可以找到FontAwesome这里的列表：A list of Font Awesome icons and their CSS content values

您也可以通过这个链接，FontAwesome Examples，在那里你可以看到不同的图标，以及如何在其应用不同的大小。