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

Question

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

Answer 1

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

1. 检查要添加 ::before 或 ::after 的元素，方法是右键单击它并转到“检查元素”。

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

   

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

   

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

像这样：

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

这里的所有都是它的 ：）

Answer 2

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

例如：

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

这会将单词“TEST”作为前缀添加到<p>它找到的任何标签。在 MDN 上查看

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