How do I inspect pseudo-classes and pseudo-elements in the CSS Rules viewer?
DOM Inspector allows you to force the :hover, :active, and :focus pseudo-classes to apply to a given node. From the DOM Nodes viewer, select the node and bring up the context menu. You should notice the Set Pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes. There is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the DOM Inspector UI. You can, however, find any rule in its parent style sheet (e.g., to modify it) by using the Style Sheets viewer in the document pane, and locating it in the CSS Rules viewer in the object pane.