[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;

}