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

Question

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

Я создал некоторые довольно сложные элементы 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 довольно хорошо проверяет :до и после элементы из коробки.

636 5

google-chrome css firefox google-chrome-devtools firebug

5 ответов:

Comments

Ничего не найдено.

Rob W · Accepted Answer · 2012-04-16 16:26:07

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

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

A.M.K · Accepted Answer · 2013-11-14 16:21:36

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

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

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

pop · Accepted Answer · 2014-04-02 18:51:13

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

это не будет отображаться:
:after {
  background-color: red;
}
это будет отображаться в инспекторе:
:after {
  content: "";   
  background-color: red;    
}
надеюсь, что это помогает.

aditsu · Accepted Answer · 2015-02-25 10:16:27

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

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

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

NoBugs · Accepted Answer · 2014-02-12 08:49:52

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