CSS中的内容属性

Question

7

在一些模板中，我看到使用CSS创建的箭头，类似于这样：

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

这段代码可以显示一个箭头，如下图所示：

enter image description here

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

- Mohsen Safari

5个回答

5

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

来自MDN：

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

Content属性可以包含任何字符, 数字, 实体。如果需要更多信息，您可以参考这篇文章。

此外，您还可以在这里获取一个方便的转换器。

这种方法也被font-awesome - Example和其他相关的SVG字体嵌入库所使用，您只需调用类到元素中，字体将被虚拟嵌入。

此外，只是附带信息，使用CSS content 属性生成的内容默认情况下是inline的，并且这个内容会在元素内部渲染而不是外部。

- Mr. Alien

2

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

但是，所使用的字符是U+F107私有使用字符-F107。这意味着除非通过私人协议约定，否则它没有任何含义，不应在公共信息交换中使用。不幸的是，一些“神奇”的技巧使用私有使用代码点来插入图形符号。这意味着除非使用一个非常特定的字体，并将一些符号分配给这些代码点，否则会显示一个未知字符的通用符号。

因此，在内容中使用图像要更加安全。

- Jukka K. Korpela

1

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

Font Awesome是一个网络字体，包含了Twitter Bootstrap框架中的所有图标，现在还包括更多其他图标。

你可以在这里找到FontAwesome的列表：Font Awesome图标及其CSS内容值列表

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

- Manisha Bano

0

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

- Ishan Jain

这不涉及内容，而是内容字符代码。 - Mohsen Safari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- knittl · Accepted Answer