關(guān)注::after和::before兩個偽元素惋增，相當于在元素內(nèi)部生成兩個額外的標簽梨撞，并且都是inline元素，要設(shè)置其寬高纺弊，必須設(shè)置display:block;。
用法
<style>
.example::before {
content: "before";
}
.example::after {
content: "after";
}
</style>
<body>
<p class="example">測試偽元素</p>
</body>
<!-- before測試偽元素after -->
瀏覽器渲染生成的DOM結(jié)構(gòu)與以下代碼相同：生成的兩個偽元素在目標元素的內(nèi)部骡男，并且是inline屬性淆游。
<p class="example" title="haha">
::before
"測試偽元素"
::after
</p>
注意
.example::before {content: "";}中content屬性必須要有，代表插入目標元素前后的內(nèi)容，其內(nèi)容可以是：
- 文本：包含在雙引號內(nèi)即可犹菱；
- 空字符串：不插入內(nèi)容拾稳，僅代表一個空元素；
- 背景圖：
content: url(image.jpg);沒有雙引號腊脱； - HTML元素的屬性值：
content: attr(title);访得，將p元素的title屬性值以文本形式插入到p元素內(nèi)容之前。
**偽元素不會出現(xiàn)在DOM中陕凹，所以不要使用偽元素生成內(nèi)容悍抑。
應(yīng)用
最適合的應(yīng)用：圖形生成、清除浮動杜耙、一些不影響功能或重要視覺的效果搜骡，并且不改變原網(wǎng)頁的整體結(jié)構(gòu)。
參考：小tip:我是如何在實際項目中使用before/after偽類的
學(xué)習(xí)使用:before和:after偽元素
