[分享]css元素直接使用content

CSS中的content属性可以用于在文档中插入额外的内容。content属性可以作用于:before和:after伪元素，在前后插入内容，可以使用以下语法：element:before { cont...

CSS中的content属性可以用于在文档中插入额外的内容。content属性可以作用于:before和:after伪元素，在前后插入内容，可以使用以下语法：

element:before {
    content: "XXX";
} 

其中，element为伪元素的标记，即:before或:after。我们可以在content中使用文本、图片、计数器等。

当使用文本或数字时，我们不需要添加任何特殊字符。例如，我们想在一个段落前面插入“序号1”，可以用如下代码：

p:before {
    counter-increment: section;
    content: "序号" counter(section) " ";
} 

这段代码会使用计数器给每个段落元素添加序号前缀，例如序号1、序号2等等。我们也可以像序号〇一这样显示序号:

p:before {
    counter-increment: section;
    content: "序号" counter(section, cjk-decimal) " ";
} 

cjk-decimal是计数器样式属性，是一种类似于“〇一二三”的样式属性，所以这样的内容就会被自动转换成cjk-decimal样式。

除了使用文本和数字，我们还可以使用:url图片。例如，我们想在一个元素后插入一个logo图片:

.element:after {
    content: url(logo.png);
} 

这样我们就可以直接将图片插入到元素的内容中。