CSS3 中before 和after 常用于添加东西 比如特效等待
但是before 和after 有时同一个时候 效果却截然不同 例子如下
当鼠标触法HOVER 时 div 里面的东西变大 会把before 的东西挡住 如果是after则不会 (注意这里的变大是CSS3 中的SCALE 如果是真正的变大则不会) 详细代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid saddlebrown; overflow: hidden; position: relative; } div:before{ content: "1234"; position: absolute; top:50px; left: 50px; } div:hover p{ -webkit-transform: scale(3,3); -webkit-transition:all 1s linear; } p{ width: 100px; height: 100px; background: #fcefa1; -webkit-transition:all 1s linear; } </style> </head> <body> <div><p></p></div> </body> </html>