伪元素::before和::after的content用法

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，必须使用，用于在css渲染中向元素逻辑上的头部或尾部添加内容，必须有值（可以是空字符串）。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容。

默认情况下，伪元素的display是默认值inline。

content用法：

1.插入字符串（可以是空值）

*::before{
    content:'我是一只猴'
}

2.attr()

*::before{
    content:'("attr(class)")'
}

3.url

*::before{
    content:url("https://www.xxx.com/img/a.png")
}

4.引号

*::before{
    content:open-quote
}