CSS 中的内容属性

Posted 2023-03-05

【中文标题】CSS 中的内容属性

【英文标题】：content property in CSS

【发布时间】：2013-12-11 05:00:29

【问题描述】：

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

div:after
    content:"\f107";

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

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

【参考方案1】：

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

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

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

您也可以通过此链接，FontAwesome Examples，您可以在其中看到不同的图标以及如何在其上应用不同的大小。

【参考方案2】：

正如其他答案所解释的，CSS 规则使用 content 属性按其 Unicode 编号插入字符。

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

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

【参考方案3】：

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

来自MDN：

content CSS 属性与::before 和::after 一起使用 伪元素在元素中生成内容。插入的对象 使用content 属性是匿名 replaced elements。

Content 属性可以包含任何character、number、entities。更多信息可以参考文章here。

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

---

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

---

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

【参考方案4】：

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

Read more

【讨论】：

这不是关于内容，这是关于内容字符代码

【参考方案5】：

这是escaped unicode character。