CSS content Property

CSS content属性被用于插入CSS生成的内容，该属性通常用于伪元素的::before或::after中，并且只能用于这些伪元素中。

用法

::before,
::after {
  content: "hello";
}

在上面的代码中，content属性被用于在文档的:before和:after元素中插入“hello”文本内容。

我们可以使用content属性插入任意HTML或文字，如下所示：

::before {
  content: "<h1>hello</h1>";
}

在上面的代码中，content属性被用于在文档的:before元素中插入

hello

值

• none：表示没有任何内容被插入。
• normal：默认值，表示在伪元素之前或之后插入常规文本。
• string：可以是任何文本字符串值。
• url：表示插入指定的图像文件，如：

::before {
  content: url(images/example.png);
}

注意事项

1. 使用content属性时，必须使用双引号("")。
2. content属性不能用于实际元素，只能用于伪元素如:before和:after。
3. content属性只是用于插入文本、HTML内容和图像文件，不能用于插入JavaScript代码。

使用content属性时，开发人员应该始终考虑对可用性的影响，并根据需要使用Aria角色和可访问性属性。