Как добавить/вставить перед или после псевдоэлемента в Chrome Inspector?

Я могу добавить правильное правило стиля с помощью знака + (New Style Rule), но я не могу добавить его под разделами "Pseudo:: before Element" или "Pseudo:: after Element" в Inspector Style. Если я попытаюсь добавить элемент ::before или ::after в HTML через "Редактировать как HTML", он появится в виде текста. Мое обходное решение заключается в добавлении <span class="pseudo_before"></span>, а затем стиле. Я что-то пропустил?

Ответ 1

Это самый простой способ и способ, которым я это делаю:

Осмотрите элемент, который вы хотите добавить:: before или:: after, щелкнув правой кнопкой мыши и перейдя в "Осмотреть элемент".
Теперь в консоли инструментов разработчика щелкните значок знака плюс. "Новое правило стиля". См. Изображение ниже, знак плюса находится рядом с кнопкой "Toggle Element State".
Затем вы сможете редактировать селектор, чтобы добавить:: before/:: после него:
Теперь отредактируйте контент по своему усмотрению, т.е.

Так же:

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

Это все, что ему нужно:)

Ответ 2

Откройте таблицу стилей, которую вы хотите в инспекторе, удерживая Ctrl и нажав на свойство стиля из этой таблицы стилей (в Windows, нажмите здесь для Mac). Затем вы можете добавлять все, что хотите, и обновлять его в реальном времени.

Например:

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

Это добавит слово "TEST" в качестве префикса для любых найденных тегов <p>. Проверьте его на MDN

Вы даже можете сохранить таблицу стилей, поэтому вам не нужно делать это дважды. Щелкните правой кнопкой мыши внутри таблицы стилей и нажмите "Сохранить как".