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>

效果图：

CSS之伪元素 ::before相关推荐

css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before
css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...
html伪元素before占用高度,CSS：伪元素：before和：after从原始元素继承宽度/高度...
我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像.但是,如果不指定宽度和高度,这些将不显示.这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页. 然而,因为这些图 ...
了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...
伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡
学习前端网页开发并将其应用于工作中已经两个月了,发现前端包括的内容真的是无比丰富,知识量巨大--漫漫长路远,尚需艰苦努力.作为一只前端开发的菜鸟,写不了特别深刻的关于前端技术性文章,只是想将工作中遇到 ...
使用CSS 中伪元素:before 和:after 做简单的动画（以小米商城非首页 logo 动画为例）
刚开始学前端不久,发现小米商城的页面做的特别漂亮,前几天在B站找了一个视频,是闪购页面的,跟上做了一下,但是他的视频只有静态的基本页面,没有动画,我今天弄了小半天(还是技术太差,哈哈哈),终于算是做出 ...
css after支持ie8,CSS使用伪元素:before,:after生成内容及IE兼容问题
1. CSS伪元素(pseudo-element)和伪类(pseudo-class) CSS2.1中的伪类有: :link :visited :hover :focus :acvtive :fir ...
CSS常用伪元素详解
1. 伪元素概念 CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的.伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法 ...

CSS之伪元素 ::before

1、伪元素不设置display：block，也不设置宽高

2、伪元素设置display：block，不设置宽高

2、伪元素设置display：block，设置宽高

CSS之伪元素 ::before相关推荐

最新文章

热门文章

CSS之伪元素 ::before

1、 伪元素不设置display：block，也不设置宽高

2、 伪元素设置display：block，不设置宽高

2、 伪元素设置display：block，设置宽高

CSS之伪元素 ::before相关推荐

最新文章

热门文章

1、伪元素不设置display：block，也不设置宽高

2、伪元素设置display：block，不设置宽高

2、伪元素设置display：block，设置宽高