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

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

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

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

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

РЕДАКТИРОВАТЬ: помимо того, что Firebug не может проверить эти элементы, я обнаружил, что Opera довольно хорошо справляется с проверкой: до и: после элементов из коробки.

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

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

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

• window.getComputedStyle
• document.querySelector

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

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

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

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

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

:after {
  background-color: red;
}

Это отобразится в инспекторе:

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

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

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

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

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

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

Выберите элемент -> выберите при наведении флажка ---> вы можете увидеть :: до и после элементов

По крайней мере, с Chrome 62 в DevTools есть параметр «Показывать теневую DOM пользовательского агента», который отображает дополнительные псевдоэлементы, такие как заполнители ввода. , которые в противном случае не отображались бы в дереве DOM.

Дополнительная информация: https://stackoverflow.com/a/26853319/3963594