技術標籤：csshtml

1、 偽元素不設定display：block，也不設定寬高

<style>
	 .div6 {
       width: 200px;
       height: 100px;
       margin: 100px;
       background-color: yellow;
     }
     .div6::before {
       content: '';
       border: 1px solid red;
     }
</style>
<div class="div6"> </
 
div>

效果圖：

結果： 寬為2px，高為23px
解釋： before偽元素預設是行內元素。border的大小為1px，所以偽元素的寬為2px，按理說高也為2px，但是瀏覽器預設字型大小為16px，雖然字型大小為16px，但是字型實際所佔的位置的高為21px，所以偽元素的高為2+21=23px；行內元素是有預設行高的，就是字型所佔的高度

2、 偽元素設定display：block，不設定寬高

<style>
     .div6::before {
       display: block;
       content: '';
       border: 1px solid red;
 

     }
</style>
<div class="div6"> </div>

效果圖：

結果： 高為2px， 寬為200px
解釋： block元素不設定寬高時，寬度跟隨父元素寬，所以是200px。高度隨內容撐開

2、 偽元素設定display：block，設定寬高

就和正兒八經的塊元素一樣了

<style>
	.div6::before {
	    content: '';
	    display: block;
	    width: 20px;
	    height: 20px;
	    border: 1px solid red;
 

	    background-color: greenyellow;
	}
</style>

效果圖：