为什么after不设置position就无法设置box-shadow？

Question

为什么after不设置position就无法设置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不设置position就会变得无效

Answer 1

.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
}

Answer 2

:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素

Answer 3

inline元素设置宽度是无效的，所以box-shadow没有效果。加了position设置宽度才有效，或者display：block/inline-block。

Answer 4

你设置absolute的时候 其实就是将伪元素变为块级元素，就可以设置宽度高度了。