鍍金池/ 問答/HTML/ 為什么after不設(shè)置position就無法設(shè)置box-shadow？

為什么after不設(shè)置position就無法設(shè)置box-shadow？

為什么after不設(shè)置position就無法設(shè)置box-shadow？請問是什么原理啊。
*{

padding: 0;
margin: 0

}
.wrap{

width: 200px;
height: 200px;
position: relative;
background: blue

}
.wrap::after{

position: absolute;
content: '';
width: 100px;
box-shadow: 0 10px 0 2px #f33433,0 20px 0 2px #f33433,0 30px 0 2px #f33433

}
這段css代碼如果after不設(shè)置position就會變得無效

回答
編輯回答
笑忘初

:before和:after偽元素在頁面中生成的元素在缺省情況下是“內(nèi)聯(lián)(inline)”元素

2017年4月1日 10:41
編輯回答
咕嚕嚕

inline元素設(shè)置寬度是無效的，所以box-shadow沒有效果。加了position設(shè)置寬度才有效，或者display：block/inline-block。

2018年8月24日 01:12
編輯回答
小眼睛

你設(shè)置absolute的時(shí)候 其實(shí)就是將偽元素變?yōu)閴K級元素，就可以設(shè)置寬度高度了。

2017年3月16日 03:21
編輯回答
伐木累
.wrap:after{
    content: '';
    width: 100px;
    height:100px;
    display:block;
    box-shadow: 0 10px 0 2px #f33433,0 20px 0 2px #f33433,0 30px 0 2px #f33433
}
2017年1月14日 21:22