[CSS] 僞元素after和屬性position:absolute以及display:block之間的關係

對僞元素的部分理解：

1.我目前看起來僞元素是被當前元素包裹的，也就是當前元素是僞元素的父元素麼。

在這種情況下，我們使用relative結合absolute就可以在在當前元素上使用display:relative,然後在該元素上添加僞元素，設置樣式：display:absolute.

2.block有兩個特點，獨立佔一行，可以設置寬高。

但是遇到absolute的時候，脫離文檔流，那麼獨佔一行就沒得意義，所以就只有可以設置寬高這點。但是實際上，當設置了absolute的時候，默認就設置block了

下邊轉自：https://www.iteye.com/blog/iandaicsu-1935432

3.[CSS] 僞元素after和屬性position:absolute以及display:block之間的關係

• 博客分類： 
• CSS

 

閱讀更多

爲什麼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;

}