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

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

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

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

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

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

5 ответов


на в Chrome Дев, стили псевдо-элемента видны на панели:

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


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

Screenshot

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

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


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

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

:after {
  background-color: red;
}

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

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

надеюсь, что это помогает.


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

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

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


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