85

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

4

2 に答える 2

123

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

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

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

    ここに画像の説明を入力

  3. 次に、セレクターを編集できるようになるので、::before / ::after を追加します。

    ここに画像の説明を入力

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

そのようです：

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

それだけです:)

于 2014-11-03T16:59:34.390 に答える
3

Ctrl キーを押しながらそのスタイルシートのスタイル プロパティをクリックして、インスペクターで目的のスタイルシートを開きます (Windows では、Mac ではここをクリックしてください)。次に、必要なものを追加すると、リアルタイムで更新されます。

例えば：

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

<p>これにより、見つかったすべてのタグに接頭辞として「TEST」という単語が追加されます。MDN で確認してください

スタイルシートを保存することもできるので、2 回行う必要はありません。スタイルシート内で右クリックし、[名前を付けて保存] をクリックします。

于 2014-02-25T23:34:58.610 に答える