[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;
}
相关推荐
hellowzm 2020-07-19
drdrsky 2020-06-04
XuNeely 2020-04-22
lyg0 2020-03-07
tianzyc 2020-02-17
沈宫新 2020-01-02
impress 2020-01-02
89510194 2019-12-31
wwwxuewen 2019-12-19
lcyangcss 2019-11-10
zhangpan 2019-11-09
liushi 2007-11-13
超哥Blog 2007-09-30
libowenhit 2007-09-27
宿舍 2019-10-21
zyhui 2014-11-13
怀抱清风 2017-03-06
qscool 2019-09-04