如何在 Chrome 的检查器中添加/插入一个 before 或 after 伪元素？

我可以通过 + 符号(New Style Rule)添加一个常规样式规则，但是我不能在样式检查器的“ Pseudo: : before Element”或“ Pseudo: : after Element”部分下添加一个常规样式规则。如果我尝试通过“ Edit as HTML”将 ::before或 ::after元素添加到 HTML 中，那么结果就是文本。我的变通方法是添加 <span class="pseudo_before"></span>，然后设置它的样式。我错过了什么吗？

54966 次浏览
小开

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.

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

You can even save the stylesheet so you don't have to do it twice. Right-click inside the stylesheet and hit 'Save as'.

小开
最佳答案

This is the easiest way and the way I do it:

  1. Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".

  2. 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.

    enter image description here

  3. Next, you will be able to edit the selector so add ::before / ::after to it:

    enter image description here

  4. Now edit the content to whatever you like, i.e.

Like so:

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

That's all there is to it :)


提交答案