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> ```