Як я можу перевірити та налаштувати псевдоелементи у браузері: before та: after?

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

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

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

Чи є спосіб перевірки цих псевдоелементів?

РЕДАГУВАТИ: Окрім помилки щодо того, що Firebug не може перевірити ці елементи, я виявив, що Opera досить добре перевіряє елементи: before і: after з коробки.

У інструментах розробника Chrome стилі псевдоелемента видно на панелі:

В іншому випадку ви також можете ввести наступний рядок у консолі JavaScript і перевірити повернутий CSSStyleDeclarationоб’єкт:

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

• window.getComputedStyle
• document.querySelector

Станом на Chrome 31 псевдоелементи відображаються на панелі елементів як дочірні елементи їх батьків, як показано на наступному зображенні:

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

Здається, успадковані стилі CSS не можна переглядати, і ви не можете редагувати вміст CSS з панелі елементів.

Chrome не відображатиме псевдоелементи: before та: after у дереві DOM, якщо вони пропускають атрибут "content". Його слід встановити, навіть якщо для нього встановлено значення нічого.

Це не відображатиметься:

:after {
  background-color: red;
}

Це з’явиться в інспекторі:

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

Сподіваюся, це допоможе.

Після того, як багато розчарувань, я зрозумів, що світлячок не вказує елементи псевдо в дереві документа на всіх , але якщо ви вибираєте точний елемент , який має псевдо елемент (и) визначено, то стилі для його псевдо елемента (ів ) показані в розділі правил стилю з правого боку. Це справедливо як для пожежної помилки, так і для вбудованої перевірки ("Q"), і я вражений тим, що ніхто раніше не потрудився це чітко пояснити.

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

Версії браузера, якими я зараз користуюся: Chromium 40.0.2214.91, Firefox 31.3.0.

Firefox вже деякий час має цю функцію, просто клацніть правою кнопкою миші, "перевірити елемент", і перегляньте елементи до та після на правій панелі інспектора.

Виберіть Елемент -> виділіть наведення курсора ---> Ви можете побачити :: до та після елементів

Принаймні, починаючи з Chrome 62, у DevTools є параметр "Показати тінь агента користувача DOM", який відображає додаткові псевдоелементи, такі як заповнювачі вводу , які інакше не відображатимуться в дереві DOM.

Більше інформації: https://stackoverflow.com/a/26853319/3963594