CSS中的content属性

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属性通过其Unicode编号插入字符。

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

因此，在正确的内容中使用图像会更安全。

Answer 4

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

Font Awesome是一个包含Twitter Bootstrap框架中所有图标的Web字体，现在还有更多。

您可以在此处找到FontAwesome的列表：A list of Font Awesome icons and their CSS content values

您还可以浏览此链接FontAwesome Examples，在其中您可以看到不同的图标以及如何在其上应用不同的尺寸。

Answer 5

CSS内容属性：内容属性与：before和：after伪元素一起使用，以插入生成的内容。

Read more