CSS之伪元素 ::before

这里写目录标题1、伪元素不设置display：block，也不设置宽高2、伪元素设置display：block，不设置宽高2、伪元素设置display：block，设置宽高1、伪元素不设置display：block，也不设置宽高<style>.div6 {width: 200px;height: 100px;margin: 100px;background-color: yel

平平无奇小码农qwq

8032人浏览 · 2021-01-22 11:54:28

平平无奇小码农qwq · 2021-01-22 11:54:28 发布

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>