html - Chrome devtools - Elements 怎样添加 before, after伪元素进行测试？

Question

需要给当前元素添加伪元素进行测试。

Answer 1

在Chrome DevTools的Elements面板中，直接添加或修改:before和:after伪元素进行测试不是直接支持的，因为DevTools主要用于检查和实时编辑DOM元素及其样式，但不直接支持对伪元素（如:before和:after）的内容或样式进行编辑。然而，你可以通过一些间接的方法来实现对伪元素的测试。

方法一：使用CSS类

1. 定义CSS类：首先，在你的CSS文件中定义一个或多个包含:before和:after伪元素的类。

   .pseudo-before::before {
       content: "Before content";
       color: red;
   }
   
   .pseudo-after::after {
       content: "After content";
       color: blue;
   }

2. 应用CSS类：然后，在DevTools的Elements面板中，找到你想要添加伪元素的元素，并通过“Add attribute”功能添加这个类名（比如class="pseudo-before pseudo-after"）。

方法二：实时编辑CSS

1. 定位元素：在Elements面板中找到你想要添加伪元素的元素。
2. 打开Styles面板：在Elements面板的右侧，点击Styles标签页。

3. 添加CSS规则：在Styles面板的底部，点击“+”号添加一个新的CSS规则。然后，输入选择器（比如直接使用该元素的选择器，或者一个更具体的选择器），并添加:before或:after伪元素及其样式。

   #your-element-id::before {
       content: "Test before";
       color: green;
   }
   
   #your-element-id::after {
       content: "Test after";
       color: purple;
   }

注意，直接在DevTools中添加的CSS规则在页面刷新后会丢失。

方法三：使用JavaScript

如果你对JavaScript比较熟悉，也可以直接在Console面板中使用JavaScript来动态添加样式规则，这样可以在不直接修改CSS文件的情况下测试伪元素。

// 假设你要修改的元素ID是"your-element-id"
var style = document.createElement('style');
document.head.appendChild(style);

style.sheet.insertRule('#your-element-id::before { content: "JS Before"; color: orange; }', 0);
style.sheet.insertRule('#your-element-id::after { content: "JS After"; color: teal; }', 0);

以上方法可以让你在Chrome DevTools中测试和修改:before和:after伪元素。