web-dev-qa-db-ja.com

Chromeのインスペクターに擬似要素の前または後を追加/挿入するにはどうすればよいですか？

+記号（新しいスタイルルール）を使用して通常のスタイルルールを追加できますが、スタイルインスペクターの[擬似:: before要素]または[擬似:: after要素]セクションの下に追加できません。 「HTMLとして編集」で::beforeまたは::after要素をHTMLに追加しようとすると、テキストとして出力されます。私の回避策は、<span class="pseudo_before"></span>を追加してからスタイルを設定することです。何か不足していますか？

cssgoogle-chromepseudo-elementinspector
50
Andrew Tibbetts

これが最も簡単な方法であり、私がそれを行う方法です。

  1. :: beforeまたは:: afterを追加する要素を右クリックして[要素の検査]に移動します。

  2. 開発者ツールコンソールで、プラス記号アイコンakaをクリックします。 「新しいスタイルのルール」。下の画像を参照してください。プラス記号は[要素状態の切り替え]ボタンの横にあります。

    enter image description here

  3. 次に、セレクターを編集して、:: before/:: afterを追加することができます：

    enter image description here

  4. 次に、コンテンツを好きなように編集します。

そのようです：

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

これですべてです:)

82
radtek

Ctrlキーを押しながらスタイルシートのスタイルプロパティをクリックして、インスペクターで目的のスタイルシートを開きます（Windowsでは、 Macの場合はここをクリック ）。その後、必要なものを追加して、リアルタイムで更新できます。

例えば：

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

これにより、検出された<p>タグの接頭辞としてWord 'TEST'が追加されます。 MDNで確認してください

スタイルシートを保存して、2回実行する必要もありません。スタイルシート内を右クリックし、「名前を付けて保存」を押します。

2
Timmah