CSS 中的 :before 和 :after 的一点小知识点

html-css034

CSS 中的 :before 和 :after 的一点小知识点,第1张

:before 选择器在被选元素的内容前面插入内容。

定义中提到,是在被选元素的 内容 前面插入内容,如下图,div 是一个容器,div 中的内容是 testDiv元素 ,css 中的 :before 和 after 都显示在 div 内部,二者分别位于 testDiv元素 内容的前后。

所以可以看到,伪元素也是被选元素的内容,只是会插入到被选元素原本内容的前后。

插入的伪元素默认是 display 属性,如果想要为伪元素设置宽高等,需要修改伪元素的 display 属性为 inline-block 或者 block 。

伪元素插入的位置是被选元素的 内容 的前或者后,因此本质上伪元素也是被选元素的子元素。所以定位时,被选元素就是伪元素的父元素。

如图,被选元素 test-div 设置了 position: relative ,外部元素 test-wrapper 也设置了 position: relative ,然后对被选元素的伪元素 :after 设置定位,可以看到,伪元素的位置是根据 test-div 来定位的,因此,可以验证 被选元素就是伪元素的父元素 这句话。

1.我们首先创建一个新的测试项目,然后创建一个新的index.html、basic.js和basic.css文件。

2.js修改文件中的样式中值div以修改div高度。文件中的文件代码如图所示。

3.我们看到3运行后两个div的高度是一样的..然后我们用js修改高度。

4.我们点击js中的代码,使用属性对应的样式属性获取div1id,然后设置高度如图所示。

5.使用js修改CSS文件中的div的height的值HTML文件中的代码。

6.我们得到js文件中的div1id属性,并使用obj.style.cssTest修改嵌入的css。

7.运行项目后,两个结果是相同的div高度改变。