相关疑难解决方法(0)

我创建了一些相当复杂的DOM元素,其中包含:after伪元素,我希望能够在Chrome Inspector或Firebug或同等版本中检查和调整它们.

尽管此WebKit/Safari博客文章(日期为2010年)中提到了此功能,但我无法在Chrome或Safari中找到此功能.Chrome确实至少有要检查的复选框:hover,:visited和:active状态,但是:before和:after无处可见.

此外,这篇博文(日期为2009年!)提到IE开发工具中存在此功能,但我目前正在使用Mac OS,所以这对我没有帮助.此外,IE不是我主要针对的浏览器.

有没有办法检查这些伪元素？

编辑:除了错误的Firebug无法检查这些元素,我发现Opera非常擅长于Inspecting:before和:after元素开箱即用.

我读过::before用于在你使用它的元素之前添加内容,例如

p::before { 
    content: "Read this: ";
}

但是我见过的大部分时间(通过开发人员工具窥视网页)他们使用它们没有任何元素,例如

<div class="btn-toolbar" role="toolbar">
      ::before
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
      </div>
      ::after
    </div>

令人惊讶的是,当您查看网页源代码时,这些::before或::after元素不会显示.

为什么它们显示在开发人员工具中？