伪元素的content属性，这种写法是啥意思？

Question

content: "官网:"attr(user-d);

Answer 1

在CSS当中，after伪元素或before伪元素是一种特殊的元素，可以认为是在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。

由于伪元素的定义出现在CSS当中，因此，伪元素内容的定义就和普通的HTML元素有所区别，采用content属性来进行设置，比如

<style>
    .test:after {
        content: "course";
    }
</style>
<div class="test">h5</div>

该段代码显示效果如下：

（注意，其中h5是div标签中的内容，而course是伪元素当中的内容）

接下来解释attr，attr表示的是属性，user-d是属性名（有可能是用户自己定义的），比如说：

<style>
    .test:after {
        content: attr(user-d);
    }
</style>
<div class="test" user-d="h5course.com">h5</div>

该段显示效果如下：

也就是说，将user-d这个属性的属性值，作为了.test元素的after伪元素内容

这些都解释明白之后，再回看你问的问题，content: "官网:"attr(user-d);

它表示的是将“官网”和user-d的属性值连接起来，共同作为伪元素的内容，比如：

<style>
    .test:after {
        content: "官网:"attr(user-d);
    }
</style>
<div class="test" user-d="h5course.com">h5</div>

显示效果为：