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

Question

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

Answer 1

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

1. 通过右键单击并转到"Inspect Element",检查要添加:: before或:: after的元素.

2. 现在,在Developer Tools Console中,单击加号图标aka."新风格规则".请参见下图,"切换元素状态"按钮旁边的加号.

   

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

   

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

像这样:

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

这里的所有都是它的 :)