Jak mogę sprawdzić i poprawić: przed i: po pseudo-elementach w przeglądarce?

Stworzyłem dość skomplikowane elementy DOM z pseudoelementem: after i chciałbym mieć możliwość sprawdzenia i dostrojenia ich w przeglądarce Chrome lub Firebug lub ich odpowiedniku.

Pomimo wzmianki o tej funkcji w tym poście na blogu WebKit / Safari (z 2010 r.), Nie mogę jej znaleźć ani w przeglądarce Chrome, ani w Safari. Chrome ma przynajmniej pola wyboru do sprawdzenia: hover,: odwiedzone i: aktywne stany, ale: przed i: po nigdzie nie widać.

Dodatkowo w tym poście na blogu (datowanym na 2009 rok!) Wspomniano, że ta możliwość istnieje w narzędziach programistycznych IE, ale obecnie używam systemu Mac OS, więc nie jest to dla mnie pomocne. Ponadto IE nie jest przeglądarką, na którą głównie kieruję.

Czy istnieje sposób sprawdzenia tych pseudoelementów?

EDYCJA: Oprócz tego, że myliłem się, że Firebug nie może sprawdzić tych elementów, stwierdziłem, że Opera jest całkiem dobra w inspekcji: przed i: po wyjęciu z pudełka.

W narzędziach deweloperskich Chrome style pseudoelementu są widoczne w panelu:

W przeciwnym razie możesz również wprowadzić następujący wiersz w konsoli JavaScript i sprawdzić zwrócony CSSStyleDeclarationobiekt:

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

• window.getComputedStyle
• document.querySelector

Od wersji Chrome 31 pseudoelementy są wyświetlane w panelu Elementy jako elementy podrzędne ich rodzica, jak pokazano na poniższym obrazku:

Możesz je wybrać tak jak normalny element, ale jeśli usuniesz contentstyl, pseudoelement również zostanie usunięty, a fokus devtools zmieni się na jego element nadrzędny.

Wygląda na to, że odziedziczone style CSS nie są widoczne i nie można edytować zawartości CSS z panelu elementów.

Chrome nie pokaże: przed i: po pseudoelementach w drzewie DOM, jeśli brakuje im atrybutu „content”. Powinien być ustawiony, nawet jeśli jest ustawiony na zero.

To się nie pojawi:

:after {
  background-color: red;
}

To pojawi się w inspektorze:

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

Mam nadzieję, że to pomoże.

Po wielu frustracji, zorientowali się, że Firefox nie pokazuje pseudo elementów w drzewie dokumentu w ogóle , ale jeśli wybrać dokładny element, który ma pseudo elementu (ów) zdefiniowana, to style dla jego elementu (ów pseudo ) są wyświetlane w sekcji zasad stylu po prawej stronie. Dotyczy to zarówno firebuga, jak i wbudowanej inspekcji („Q”) i jestem zszokowany, że nikt wcześniej nie zadał sobie trudu, aby wyjaśnić to jasno.

Oczywiście, obsługa pseudoelementów chrome / chromium jest znacznie lepsza, ponieważ można je wybierać (zarówno w drzewie dokumentu, jak i bezpośrednio na stronie) i sprawdzać tak jak zwykłe elementy, z układem, właściwościami i wszystkim innym, niezależnie od ich „właściciela” ”.

Wersje przeglądarek, których obecnie używam: Chromium 40.0.2214.91, Firefox 31.3.0.

Firefox ma tę funkcję od jakiegoś czasu, po prostu kliknij prawym przyciskiem myszy, „sprawdź element” i zobacz elementy przed i po w prawym panelu inspektora.

Wybierz Element -> wybierz hover zaznaczone ---> możesz zobaczyć :: przed i po elementach

Przynajmniej od wersji Chrome 62 w DevTools jest ustawienie `` Pokaż cień DOM klienta użytkownika '', które wyświetla dodatkowe pseudoelementy, takie jak symbole zastępcze danych wejściowych , które w przeciwnym razie nie się w drzewie DOM.

Więcej informacji: https://stackoverflow.com/a/26853319/3963594