CSSPseudoElement - 表示一个伪元素
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
CSSPseudoElement 接口表示一个伪元素，该伪元素可以是事件的目标，也可以使用 Web Animations API 进行动画处理。可以通过调用 Element.pseudo() 获得此接口的实例。
属性
CSSPseudoElement.element 只读
返回伪元素的原始 / 父元素 Element。
CSSPseudoElement.type 只读
返回一个 CSSOMString，表示伪元素的选择器。
方法
CSSPseudoElement 继承了 EventTarget，因此它继承了以下方法：
EventTarget.addEventListener()
在伪元素上注册特定事件类型的事件处理程序。
EventTarget.dispatchEvent()
将事件调度到此伪元素。
EventTarget.removeEventListener()
从伪元素中删除事件侦听器。
实例
使用伪元素的基本实例
通过伪元素，大多数现代浏览器会在 <q> 元素内的文本周围自动添加引号。（在较旧的浏览器中，可能需要一个样式规则来添加引号。）下面的实例演示了 CSSPseudoElement 对象的基本属性，该对象代表了一个引号。
const element = document.querySelector('q');
const cssPseudoElement = element.pseudo('::before');
console.log(cssPseudoElement.element); // 输出 [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // 输出 '::before'
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Pseudo-Elements Level 4 CSSPseudoElement 的定义 |
工作草案 | 初始定义。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 不支持 | 不支持 | 75 63 — 75 47 — 63 | 不支持 | 不支持 | 不支持 |
element | 不支持 | 不支持 | 75 67 — 75 63 — 671 47 — 631 | 不支持 | 不支持 | 不支持 |
type | 不支持 | 不支持 | 75 63 — 75 47 — 63 | 不支持 | 不支持 | 不支持 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 不支持 | 不支持 | 未知 | 63 47 — 63 | 未知 | 不支持 | 不支持 |
element | 不支持 | 不支持 | 未知 | 67 63 — 671 47 — 631 | 未知 | 不支持 | 不支持 |
type | 不支持 | 不支持 | 未知 | 63 47 — 63 | 未知 | 不支持 | 不支持 |
1. 通过 parentElement 支持。