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>

效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！