before和after偽元素 · 前端

## 概述之所以被稱為偽元素,是因為他們不是真正的頁面元素,html沒有對應的元素,但是其所有用法和表現行為與真正的頁面元素一樣,可以對其使用諸如頁面元素一樣的css樣式,表面上看上去貌似是頁面某些元素來展現,實際上是css樣式展現的行為,因此被稱為偽元素.就是偽元素在HTML代碼機構中的展現,可以看出無法偽元素的解構無法審查. ## 注意偽元素選擇器本質上是插入一個元素(標簽盒子)只不過是行內元素. ``` <style> div::before { content: 'OK'; color: pink; display: block; width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div>hello</div> </body> ``` ![](https://box.kancloud.cn/9d81018e8310ca472a50d5577a4c554f_2064x460.png) ## 案例 ``` <style> div { width: 100px; height: 100px; background-color: pink; margin: 30px auto; position: relative; } div:hover::before { content: ''; width: 100%; height: 100%; box-sizing: border-box; position: absolute; border: 10px solid rgba(0,0,0,.3); display: block; } </style> </head> <body> <div></div> ```