伪元素

实际做项目时遇到的伪元素相关问题：

1.

问题描述：父元素上有一个after伪元素，该父元素的子元素定义了click处理函数，点击子元素，该函数没有被调用。将伪元素去掉，函数可以正常被调用。
原因：有伪元素的情况下，点击子元素，子元素自身的click函数不会被调用，但父元素的click函数有被调用。 猜想可能是伪元素盖住了子元素的点击事件
解决： 给伪元素的样式上添加：pointer-events: none 作用：禁止伪元素响应鼠标事件

css pointer-events 属性 ：指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target

什么是伪元素

伪元素其实是一个元素的子元素。给一个元素添加before after伪元素，就相当于给该元素加了两个子元素。
<div className={style.ele}>我在这</div>

.ele {
  &::before {
    content: '';
  }

  &::after {
    content: '';
  }
}

通过浏览器工具查看dom结构：before作为第一个子元素，after作为最后一个子元素。

伪元素的常见写法

&::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.04);
}

伪元素经常可以用于：
画图： 比如分隔线、点等小元素
一个父元素的遮罩：比如设置伪元素大小等于父元素，盖在父元素上，通过设置一个背景色，给父元素添加一个蒙层。
特殊字符： 比如用于表示该字段是必填的： 一个红色的* 。可以设置伪元素的content为指定的字符: content: '*'

一般会给伪元素添加以下样式：绝对定位（设置相对父元素位置），content内容，display

特点

使用伪元素可以简化html标签，它不是一个实际的html标签，却可以实现各种样式。
它不会对dom造成负担，因为它不存在于dom结构中。因此也就无法用js操作伪元素。