不能。getComputedStyle需显式传入伪元素标识符如"::before"才能获取其样式，直接传元素节点只能获自身样式；content属性可读取但返回解析后值；伪类状态样式需手动模拟触发。
getComputedStyle 能否直接获取伪元素样式
不能。直接传入原始元素节点，getComputedStyle 默认只返回该元素自身的计算样式，对 ::before、::after 等伪元素完全不可见——它们甚至不参与 DOM 树遍历，自然无法被当作目标节点传入。
必须用第二个参数指定伪元素标识符
调用时需显式传入伪元素的字符串标识，例如 "::before" 或 "::after"（注意双冒号语法，单冒号在现代浏览器中虽部分兼容，但规范要求双冒号）：
const el = document.querySelector('.box');
const beforeStyle = window.getComputedStyle(el, '::before');
常见误区：
- 传错字符串：写成
':before'、'::BEFORE'、'before'都会返回空CSSStyleDeclaration（所有属性值为''） - 元素未渲染或伪元素内容为空（如
content: ""）时，浏览器可能不生成伪元素盒，此时同样返回空样式对象 - 伪元素使用了
display: none，大多数浏览器仍会返回样式（因计算样式发生在布局前），但某些属性（如width、height）可能为'0px'或'auto'
获取伪元素 content 值的特殊处理
content 是唯一可通过 getComputedStyle 读取的伪元素专属属性，但它返回的是解析后的字符串，而非原始 CSS 值：
-
content: "hello"→ 返回"hello" -
content: attr(data-tip)→ 若元素有data-tip="tip1"，则返回"tip1" -
content: url(./icon.svg)→ 返回完整绝对 URL（如"https://example.com/icon.svg"） -
content: open-quote→ 返回实际引用符号（如"“"），取决于quotes设置
注意：content 在伪元素未被渲染（如父元素 display: none）时返回 none，不是空字符串。
伪元素样式依赖父元素状态时的陷阱
伪元素可响应父元素的伪类（如 .btn:hover::before），但 getComputedStyle(el, '::before') **永远只返回当前静态状态下的样式**，不会自动切换到悬停态。若需获取 hover 下的样式，必须先触发状态：
- 临时添加 class 模拟：给元素加
class="hover"，CSS 写.btn.hover::before { ... } - 用
el.classList.add('hover')后再调用getComputedStyle，之后记得清理 - 无法通过 JS “主动 hover” —— 浏览器不暴露触发伪类状态的 API
另一个隐藏限制：若伪元素使用了 inherit 或 unset 等级联关键字，其最终值取决于父元素对应属性的实际计算值，需手动向上追溯，getComputedStyle 不会自动展开继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
