我如何检查和调整：在浏览器中的伪元素之前和之后？

5 回答

• 5

  在Chrome's Dev tools中，伪元素的样式在面板中可见：

  

  否则，您还可以在JavaScript控制台中输入以下行，并检查返回的CSSStyleDeclaration对象：

  getComputedStyle(document.querySelector('html > body'), ':before');
  

  • window.getComputedStyle

  • document.querySelector

  回复于 2024-04-28T05:38:40+08:00
• 16

  从Chrome 31开始，伪元素在元素面板中显示为其父元素的子元素，如下图所示：

  

  您可以像普通元素一样选择它们，但如果删除 content 样式，则也会删除伪元素，并且devtools焦点将更改为它的父元素 .

  似乎继承的CSS样式不可见，您无法从元素面板编辑CSS内容 .

  回复于 2024-04-28T05:38:40+08:00
• 1

  Chrome不会显示：在DOM树中的之前和之后的伪元素，如果它们错过了“内容”属性 . 它应该被设置，即使它被设置为空 .

  这不会出现：

  :after {
    background-color: red;
  }
  

  这将显示在检查员中：

  :after {
    content: "";   
    background-color: red;    
  }
  

  希望能帮助到你 .

  回复于 2024-04-28T05:38:40+08:00
• 26

  经过很多挫折之后，我发现firefox没有在文档树 at all 中显示伪元素，但是如果选择 exact 元素，其中定义了伪元素，那么其伪元素的样式显示在右侧的样式规则部分中 . 对于萤火虫和内置检查（"Q"）都是如此，令我感到震惊的是，之前没有人愿意解释清楚 .

  显然，chrome / chromium对伪元素的处理非常优越，因为它们可以被选中（在文档树中和直接在页面上）并且像常规元素一样进行检查，具有布局，属性和其他所有元素，独立于它们的“所有者” ” .

  我目前使用的浏览器版本：Chromium 40.0.2214.91，Firefox 31.3.0 .

  回复于 2024-04-28T05:38:40+08:00
• 51

  Firefox现在已经有了这个功能，只需右键单击“inspect element”，然后在检查器右侧面板中查看before和after元素 .

  回复于 2024-04-28T05:38:40+08:00