关注::after和::before两个伪元素，相当于在元素内部生成两个额外的标签，并且都是inline元素，要设置其宽高，必须设置display:block;。
用法
<style>
.example::before {
content: "before";
}
.example::after {
content: "after";
}
</style>
<body>
<p class="example">测试伪元素</p>
</body>
<!-- before测试伪元素after -->
浏览器渲染生成的DOM结构与以下代码相同：生成的两个伪元素在目标元素的内部，并且是inline属性。
<p class="example" title="haha">
::before
"测试伪元素"
::after
</p>
注意
.example::before {content: "";}中content属性必须要有，代表插入目标元素前后的内容，其内容可以是：
- 文本：包含在双引号内即可；
- 空字符串：不插入内容，仅代表一个空元素；
- 背景图：
content: url(image.jpg);没有双引号； - HTML元素的属性值：
content: attr(title);，将p元素的title属性值以文本形式插入到p元素内容之前。
**伪元素不会出现在DOM中，所以不要使用伪元素生成内容。
应用
最适合的应用：图形生成、清除浮动、一些不影响功能或重要视觉的效果，并且不改变原网页的整体结构。
网友评论