如何在Chrome的Inspector中添加/插入伪元素之前或之后？ [英] How do I add / insert a before or after pseudo element into Chrome's Inspector?

问题描述

我可以通过+符号（新样式规则）添加常规样式规则，但不能在样式检查器的伪元素::元素之前或伪元素::之后部分添加一个样式规则。如果我尝试通过Edit as HTML将 :: before 或 :: after 元素添加到HTML中，它作为文本出现。我的解决方法是添加< span class =pseudo_before>< / span> ，然后添加样式。我错过了什么？

解决方案

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

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




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

   
   
   

   
   
   




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

   像这样：
   
   

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

   这就是它的全部内容：）

   
   

   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 ::before or ::after element 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?

   解决方案

   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.

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

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

   Like so:

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

   That's all there is to it :)

   这篇关于如何在Chrome的Inspector中添加/插入伪元素之前或之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！