css 伪元素::after

html-css09

css 伪元素::after,第1张

css ::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 由于伪元素本身是行内元素，所以要变成块级元素的需要使用 display: block 以下是画一个三角形的图案的样式。 content是一定需要的，content 可以是： 值得注意的是: :after 和 ::after的关系

开篇一句话：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: