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

Question

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

Answer 1

这是最简单的方法和方式：

1. 通过右键单击并前往＆＃34; Inspect Element＆＃34;来检查要添加:: before或:: after的元素。

2. 现在在开发人员工具控制台中，单击加号图标aka。 ＆＃34;新风格规则＆＃34;。见下图，＆＃34;切换元素状态＆＃34;旁边的加号。按钮。

   

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

   

4. 现在将内容编辑为您喜欢的内容，即

像这样：

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

这就是它的全部内容：）

Answer 2

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

例如：

p::before {
    content:'TEST';
}

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

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