CSS 如何在 Chrome 的 Inspector 中添加/插入 before 或 after 伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22023952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add / insert a before or after pseudo element into Chrome's Inspector?
提问by Andrew Tibbetts
I can add a regular style rule via the + sign (New Style Rule) but I can't add one under the "Pseudo ::before Element" or "Pseudo ::after Element" sections of the Style Inspector. If I try to add the ::beforeor ::afterelement into the HTML via "Edit as HTML", it comes out as text. My workaround is to add <span class="pseudo_before"></span>and then style that. Am I missing something?
我可以通过 + 符号（新样式规则）添加常规样式规则，但不能在样式检查器的“伪::before 元素”或“伪::after 元素”部分下添加规则。如果我尝试通过“编辑为 HTML”将::beforeor::after元素添加到 HTML 中，它会以文本形式出现。我的解决方法是添加<span class="pseudo_before"></span>然后设置样式。我错过了什么吗？
回答by radtek
This is the easiest way and the way I do it:
这是最简单的方法，也是我这样做的方式：
Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".
Now in the Developer Tools Console, click on the plus sign icon aka. "New Style Rule". See the image below, the plus sign is next to the "Toggle Element State" button.
Next, you will be able to edit the selector so add ::before / ::after to it:
Now edit the content to whatever you like, i.e.
检查要添加 ::before 或 ::after 的元素，方法是右键单击它并转到“检查元素”。
现在在开发者工具控制台中，点击加号图标。“新风格规则”。请参见下图，加号位于“切换元素状态”按钮旁边。
接下来，您将能够编辑选择器，因此添加 ::before / ::after 到它：
现在将内容编辑为您喜欢的任何内容，即
Like so:
像这样：
.grp-row::before {
content: '> ';
}
That's all there is to it :)
这里的所有都是它的 ：）
回答by Timmah
Open the stylesheet you want in the inspector by holding Ctrl and clicking on a style property from that stylesheet (on Windows, click here for Mac). Then you can add whatever you want and it updates in realtime.
通过按住 Ctrl 并单击样式表中的样式属性（在 Windows 上，单击此处适用于 Mac），在检查器中打开所需的样式表。然后你可以添加任何你想要的东西，它会实时更新。
For example:
例如：
p::before {
content:'TEST';
}
This will add the word 'TEST' as a prefix to any <p>tags it finds. Check it out on MDN
这会将单词“TEST”作为前缀添加到<p>它找到的任何标签。在 MDN 上查看
You can even save the stylesheet so you don't have to do it twice. Right-click inside the stylesheet and hit 'Save as'.
您甚至可以保存样式表，这样您就不必做两次了。右键单击样式表并点击“另存为”。
