[解決済み] Chromeのインスペクタにbeforeやafterの擬似要素を追加／挿入するには？

質問

通常のスタイルルールは + 記号 (新しいスタイルルール) で追加できますが、スタイルインスペクターの "Pseudo ::before Element" または "Pseudo ::after Element" のセクションに追加することができません。もし ::before または ::after 要素をHTMLに挿入する際、quot;Edit as HTML"を使用すると、テキストとして出力されます。私の回避策は <span class="pseudo_before"></span> を追加して、それをスタイルすることです。私は何かを見逃しているのでしょうか？

どのように解決するのですか？

これは最も簡単な方法で、私がやっている方法です。

1. 要素を右クリックして、"Inspect Element"に進み、:beforeまたは:afterを追加したい要素を検査します。

2. 開発者ツールコンソールで、プラス記号のアイコン、別名 "新しいスタイルルール" をクリックします。下の画像を参照してください。プラス記号は、"Toggle Element State" ボタンの横にあります。

   

3. 次に、セレクタを編集して、:before / ::after を追加します。

   

4. ここで、コンテンツを好きなように編集して、すなわち

このように

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

以上です :)