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

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

来源

2014-02-25 Andrew Tibbetts

您可以使用加号，然后在类或元素被突出显示，通过编辑类或元素名称添加伪元素。按下右箭头键可以将你放在最后。 – brouxhaha

有没有办法在Firebug中做到这一点？ – Keyslinger

这是最简单的方式和我的方式做到这一点：

检查您要添加的::元素之前或::通过右键单击它，要“检查元素”之后。
现在在开发人员工具控制台中，单击加号图标aka。 “新风格规则”。看到下面的图片，加号在“切换元素状态”按钮旁边。
接下来，你将能够编辑选择如此前加::/::后它：
现在编辑任何你喜欢的内容，即

像这样：

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

这是所有有它:)

来源

2014-11-03 16:59:34 radtek

通过按住Ctrl并单击样式表中的样式属性（在Windows上，click here for Mac）打开样式表。然后，你可以添加任何你想要的，并实时更新。

例如：

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

这将作为前缀加字“TEST”任何<p>标签找到。 Check it out on MDN

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

来源

2014-02-25 23:34:58 Timmah

Ctrl单击不适用于我（也许是因为我在Mac上？），但只需单击样式声明右侧样式表的链接，即可在“源”选项卡中打开样式表，并且是可编辑的。我知道的很少！谢谢！ –

嗯。当我在声明表格之前添加：之前或之后：它不适用。看起来我仍然需要（检查器）标记中的那个小':: before'或':: after'元素。没有？ –

您也可以打开编辑器，然后转到资源选项卡并选择左侧菜单顶部的“框架”文件夹。然后你可以点击你网站的文件结构并在那里编辑CSS。 – Timmah

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

回答

相关问题