vue css伪元素after的使用

html-css029

vue css伪元素after的使用,第1张

开篇一句话:CSS的伪类,伪元素就当成vue的过滤器使用就好了,我也是想到这个突然就茅塞顿开了。

用法:

:after 选择器表示向选定的元素之后插入内容。

要有content属性

需求举例:div按钮后面有个朝下的ico,点击div后 ico方向朝上

实现办法:

1.可以使用JS实现,div的class名绑定到一个变量上,根据变量的真假值更换class

2.伪类的实现方法

先说思路:

要借助两个class,基础class('base_class')和激活class('rotate').

base_class

相对定位。

base_class:after

放ico朝上的样式,绝对定位。

rotate不要单独加after,不然会取代掉base_class的after,

要两个class都出现才加after

rotate绑定到一个布尔变量上,该变量的真假值由open_select_window更改

html:

: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 来定位的,因此,可以验证 被选元素就是伪元素的父元素 这句话。