[CSS] 伪元素after和属性position:absolute以及display:block之间的关系

为什么after伪元素之后content无法应用高度和宽度?

 
1) 想要给after的内容加上大于字体本身的宽度和高度,并给加上背景色
<div class='test'></div>
 
.test {
width:100px;
height:100px;
background: green;
}
 
.test:after {
content:"12";
background:grey;
width:50px;
height:50px;
}
 
显示范围只有“12”这部分,而没有50px * 50px的框。
因为after之后的元素默认display为inline,所以无法响应width和height属性。如果加上display:block就可以正常显示了。(为何after不继承之前的内容的属性。之前的内容应该是block。)
inline box 不响应垂直margin, width, height, max/min width/height 等属性声明;block box 则可以响应这些属性。
 
2)加上position: absolute也可以正常显示
position: absolute 会使得原来的inline元素变成block元素,从而能够使用width属性
 
测试: 当添加span样式的时候,display:inline; 使用了absolute样式之后,display:block;
<div>123123 <span>this is inline</span></div>
span {
position:absolute;
}

相关推荐