Làm cách nào để kiểm tra và tinh chỉnh: trước và: sau phần tử giả trong trình duyệt?

Tôi đã tạo một số phần tử DOM khá phức tạp với phần tử: sau phần tử giả và tôi muốn có thể kiểm tra và tinh chỉnh chúng trong Trình kiểm tra Chrome hoặc Firebug hoặc tương đương.

Mặc dù tính năng này đã được đề cập trong bài đăng trên blog WebKit / Safari này (ngày 2010), tôi không thể tìm thấy tính năng này trong Chrome hoặc Safari. Chrome ít nhất có các hộp kiểm để kiểm tra: hover,: đã thăm và: trạng thái hoạt động, nhưng: trước và: sau thì không thấy đâu.

Ngoài ra, bài đăng trên blog này (ngày 2009!) Đề cập đến khả năng này tồn tại trong các công cụ dành cho nhà phát triển IE, nhưng tôi hiện đang sử dụng Mac OS, vì vậy điều này không giúp được gì cho tôi. Ngoài ra, IE không phải là trình duyệt mà tôi chủ yếu nhắm đến.

Có cách nào để kiểm tra các yếu tố giả này không?

CHỈNH SỬA: Ngoài sai lầm về việc Firebug không thể kiểm tra các phần tử này, tôi thấy Opera khá tốt trong việc Kiểm tra: trước và: các phần tử ra khỏi hộp.

Trong các công cụ dành cho nhà phát triển của Chrome , các kiểu của phần tử giả sẽ hiển thị trong bảng điều khiển:

Nếu không, bạn cũng có thể nhập dòng sau vào bảng điều khiển JavaScript và kiểm tra CSSStyleDeclarationđối tượng trả về :

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

• window.getComputedStyle
• document.querySelector

Kể từ Chrome, 31 phần tử giả hiển thị trong bảng phần tử dưới dạng phần tử con của phần tử gốc của chúng như được hiển thị trong hình ảnh sau:

Bạn có thể chọn chúng như cách bạn làm với một phần tử bình thường nhưng nếu bạn xóa contentkiểu thì phần tử giả cũng sẽ bị xóa và tiêu điểm của devtools sẽ thay đổi thành phần tử gốc.

Có vẻ như các kiểu CSS kế thừa không thể xem được và bạn không thể chỉnh sửa nội dung CSS từ bảng phần tử.

Chrome sẽ không hiển thị: trước và: sau các phần tử giả trong cây DOM, nếu chúng bỏ sót thuộc tính "content". Nó nên được đặt, ngay cả khi nó được đặt thành không.

Điều này sẽ không hiển thị:

:after {
  background-color: red;
}

Điều này sẽ hiển thị trong thanh tra:

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

Hy vọng nó giúp.

Sau rất nhiều thất vọng, tôi đã tìm ra rằng firefox không hiển thị các yếu tố giả trong cây tài liệu ở tất cả , nhưng nếu bạn chọn chính xác các yếu tố trong đó có yếu tố giả (s) được xác định, sau đó phong cách cho các phần tử giả của nó (s ) được hiển thị trong phần quy tắc kiểu ở phía bên phải. Điều này đúng với cả firebug và thanh tra tích hợp ("Q"), và tôi rất ngạc nhiên vì không ai buồn giải thích rõ ràng điều này trước đây.

Rõ ràng, khả năng xử lý các phần tử giả của chrome / chromium vượt trội hơn hẳn, vì chúng có thể được chọn (cả trong cây tài liệu và trực tiếp trên trang) và được kiểm tra giống như các phần tử thông thường, với bố cục, thuộc tính và mọi thứ khác, độc lập với "chủ sở hữu của chúng ".

Phiên bản trình duyệt hiện tôi đang sử dụng: Chromium 40.0.2214.91, Firefox 31.3.0.

Firefox đã có tính năng này một thời gian, chỉ cần nhấp chuột phải, "kiểm tra phần tử" và xem các phần tử trước và sau trong bảng điều khiển bên phải của trình kiểm tra.

Chọn Phần tử -> chọn di chuột đã kiểm tra ---> bạn có thể thấy :: phần tử trước và sau

Ít nhất vì Chrome 62 có một cài đặt trong DevTools thành 'Hiển thị DOM bóng tác nhân người dùng', hiển thị các phần tử giả bổ sung như trình giữ chỗ đầu vào , nếu không sẽ hiển thị trong cây DOM.

Thông tin thêm: https://stackoverflow.com/a/26853319/3963594