如何在Chrome Dev Tools中查看pseudo-element:hover状态CSS？

你遇到的操作选项灰化，本质是因为伪元素不属于DOM树里可独立交互的真实节点，DevTools的强制状态面板只会给真实DOM元素提供操作入口——毕竟伪元素没有自己的独立交互逻辑，所有状态本来就是跟着父级真实元素走的，没必要单独给它开放状态触发开关。

• 最常用的方案：从父元素入口强制悬停状态
  1. 在Elements元素面板的DOM树里，先展开找到伪元素所属的真实父节点，注意不要直接选中伪元素本身
  2. 点面板顶部的:hov按钮弹出状态菜单，勾选父元素的:hover选项
  3. 这时候侧边的样式面板会自动加载所有关联父元素悬停触发的伪元素CSS规则，直接就能看到伪元素在悬停态下的所有样式定义，根本不需要单独给伪元素选状态。
• 选择器复杂时的备用方案：临时调整匹配规则
  如果父元素强制悬停后没触发对应的伪元素样式（一般是CSS选择器嵌套层级写的比较复杂导致的），可以在样式面板找到对应伪元素的规则，手动临时给选择器加上父级的:hover标记——比如把原有规则.card::before临时改成.card:hover::before，调整完就能直接预览对应状态下的样式，调试好之后把选择器改回原来的就行。
• 快速验证方案：临时类名触发
  可以在Console控制台给目标父元素动态加一个临时类，手动触发原本只在悬停态生效的伪元素规则，比如输入document.querySelector('.目标元素选择器').classList.add('force-hover')，同时临时把CSS里关联悬停态的伪元素选择器改成匹配这个临时类的形式（比如.force-hover::after），就能立刻看到伪元素的悬停样式效果。

内容的提问来源于stack exchange，提问作者masonCherry