CSS中的content属性

Question

在某些模板中,我看到用CSS创建的箭头.这样的事情:

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

此代码显示如下箭头:

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

Answer 1

这是一个转义的 unicode 字符。

Answer 2

使用content属性在元素内嵌入虚拟内容,它与伪:before或一起使用:after,因此如果使用:before,将在之前嵌入内容.

来自MDN:

的contentCSS属性用于与::before和::after 伪元素,以生成式中的元件的内容.使用该content属性插入的对象是匿名 替换元素.

内容属性可以包含任何字符,数字,实体.有关更多信息,请参阅此处的文章.

此外,您可以在这里获得一个方便的转换器.

这个方法也被font-awesome使用 - 示例和其他相关的svg字体嵌入库,您可以在其中简单地调用类到元素,并且字体将被虚拟嵌入.

另外,只是一个辅助信息,默认情况下使用CSS content属性生成的内容inline,这也是在元素内部而不是外部呈现的.