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

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

34
css google-chrome inspector pseudo-element

2 ответов

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

  1. Проверьте элемент, который вы хотите добавить:: before или:: after, щелкнув его правой кнопкой мыши и перейдя в "проверить элемент".

  2. теперь в консоли инструментов разработчика нажмите на значок плюса aka. "Новый Стиль". См. изображение ниже, знак плюса рядом с кнопкой" переключить состояние элемента".

    enter image description here

  3. Далее вы сможете редактировать селектор так добавляет :: before /:: after к нему:

    enter image description here

  4. теперь отредактируйте содержимое так, как вам нравится, т. е.

вот так:

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

вот и все :)

62

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

например:

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

Это добавит слово "тест" в качестве префикса к любому <p> теги, которые он находит. проверьте это на MDN

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

1