如何在 Chrome 的检查器中添加/插入之前或之后的伪元素？

Posted 2023-03-06

【中文标题】如何在 Chrome 的检查器中添加/插入之前或之后的伪元素？

【英文标题】：How do I add / insert a before or after pseudo element into Chrome's Inspector?

【发布时间】：2014-03-28 06:02:43

【问题描述】：

我可以通过 + 号（新样式规则）添加常规样式规则，但我不能在样式检查器的“伪 ::before 元素”或“伪 ::after 元素”部分下添加一个。如果我尝试通过“编辑为 html”将 ::before 或 ::after 元素添加到 HTML 中，它会以文本形式出现。我的解决方法是添加 <span class="pseudo_before"></span> 然后设置样式。我错过了什么吗？

【问题讨论】：

您可以使用加号，然后在突出显示类或元素时，通过编辑类或元素名称添加伪元素。点击右箭头键会将您置于最后。

有没有办法在 Firebug 中做到这一点？

【参考方案1】：

按住 Ctrl 并单击该样式表中的样式属性（在 Windows 上，click here for Mac），在检查器中打开您想要的样式表。然后你可以添加任何你想要的东西，它会实时更新。

例如：

p::before 
    content:'TEST';

这会将单词“TEST”作为前缀添加到它找到的任何<p> 标记中。 Check it out on MDN

您甚至可以保存样式表，这样您就不必做两次了。在样式表内右键单击并点击“另存为”。

【讨论】：

Ctrl 单击对我不起作用（可能是因为我在 Mac 上？），但只需单击样式声明右侧的样式表链接即可在 Sources 选项卡中打开样式表是的，它是可编辑的。我知道的很少！谢谢！

嗯。当我向源表添加 :before 或 :after 声明时，它不适用。看来我仍然需要（检查器）标记中的那个小 ::before 或 ::after 元素。没有？

您也可以通过打开编辑器，然后转到“资源”选项卡并选择左侧菜单顶部的“框架”文件夹来访问它。然后，您可以向下单击站点的文件结构并在那里编辑 CSS。

啊啊啊，是那种风格的双 :: 吸引了我！谢谢！

是的，有点误导诶

【参考方案2】：

这是最简单的方法，也是我的做法：

通过右键单击要添加 ::before 或 ::after 的元素并转到“检查元素”来检查它。

现在在开发者工具控制台中，点击加号图标。 “新风格规则”。见下图，加号在“切换元素状态”按钮旁边。

接下来，您将能够编辑选择器，添加 ::before / ::after 到它：

现在将内容编辑为您喜欢的任何内容，即

像这样：

.grp-row::before        
   content: '> '; 

这就是它的全部内容:)

【讨论】：

如果你的元素没有类怎么办？ Chrome 只会使用像 p 这样的标准选择器，它会影响所有元素，而不是你想要的元素。

按照这些确切的说明在最新的 chrome 中不会产生实时更新。

在 Chrome 72 中为我工作，只要我输入一个内容属性，即使像 content: '' 这样的空白也是如此

@Vic，您只需要在检查器的 LHS 中添加一个类。即右击p标签，选择Edit as HTML，然后添加class="whatever"