Как я могу проверить и настроить: до и: после псевдоэлементов в браузере?

Я создал довольно сложные элементы DOM с: после псевдоэлемента, и я хотел бы иметь возможность проверять и настраивать их в Chrome Inspector или Firebug или в эквиваленте.

Несмотря на эту функцию, упомянутую в этом сообщении в блоге WebKit/Safari (датированном 2010 годом), я не могу найти эту функцию вообще ни в одном Chrome или Safari. У Chrome есть хотя бы флажки для проверки: hover,: visited и: active states, но: before и: after нигде не видно.

Кроме того, это сообщение в блоге (датировано 2009!) упоминает, что эта возможность существует в инструментах IE dev, но в настоящее время я использую Mac OS, так что это не помогает мне. Кроме того, IE не является браузером, в котором я ориентирован прежде всего.

Есть ли способ проверить эти псевдоэлементы?

EDIT: помимо того, что Firebug не может проверить эти элементы, я обнаружил, что Opera очень хороша в проверке: до и: после элементов из коробки.

Ответ 1

В Инструменты Chrome Dev стили псевдоэлемента видны на панели:

В противном случае вы также можете ввести следующую строку в консоли JavaScript и проверить возвращаемый объект CSSStyleDeclaration:

getComputedStyle(document.querySelector('html > body'), ':before');

Ответ 2

Как и в плеерах Chrome 31, на панели элементов отображаются дочерние элементы родительского элемента, как показано на следующем изображении:

Вы можете выбрать их так же, как обычный элемент, но если вы удалите стиль content, тогда псевдоэлемент также будет удален и фокус devtools изменится на него родительским.

Похоже, что унаследованные стили CSS не доступны для просмотра, и вы не можете редактировать содержимое CSS с панели элементов.

Ответ 3

Chrome не будет показывать: до и: после псевдоэлементов в DOM-дереве, если они пропускают атрибут "content". Он должен быть установлен, даже если он не установлен.

Это не будет отображаться:

:after {
  background-color: red;
}

Это будет отображаться в инспекторе:

:after {
  content: "";   
  background-color: red;    
}

Надеюсь, что это поможет.

Ответ 4

После многих разочарований я понял, что firefox не показывает псевдоэлементы в дереве документов вообще, но если вы выберете элемент exact, который имеет псевдоэлемент (ы), то стили для его псевдоэлементов показаны в разделе правил стиля с правой стороны. Это справедливо как для firebug, так и для встроенного инспектора ( "Q" ), и я шокирован тем, что до этого никто не догадывался об этом.

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

Варианты браузера, которые я использую сейчас: Chromium 40.0.2214.91, Firefox 31.3.0.

Ответ 5

У Firefox появилась эта функция еще некоторое время, просто щелкните правой кнопкой мыши, "проверьте элемент" и просмотрите элементы до и после на правой панели инспектора.