CSS之伪元素 ::before

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>

效果图：