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；行内元素是有默认行高的，就是字体所占的高度

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

伪元素：操作元素的子元素，如 ::before、::after、::content等等。
content 属性表示伪元素填充的内容。

.a {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.a::before {
    content: "♥";
    color: red;
}
.a::after {
    content: "♥";
    color: blue;
}

<div class="a">
"hello"
</div>