Bug 199165 – Web Inspector: REGRESSION: Elements: Styles: forcing a pseudo-class on a pseudo-element doesn't immediately update the styles sidebar

• Status: NEW
• Component: Web Inspector

[Devin Rousso]

```
<style>
:any-link {
    position: relative;
    color: hsl(200, 100%, 50%);
    text-decoration: none;
}

:any-link::after {
    position: absolute;
    right: -0.05em;
    bottom: 0.05em;
    left: -0.05em;
    content: "";
    border-bottom: 0.1em solid;
    transition: transform 100ms ease-out;
}

:any-link:not(:hover)::after {
    transform: rotateY(90deg);
}
</style>
<a href="#">Hello World</a>
```

# STEPS TO REPRODUCE:
1. inspect <data:text/html,<style>%20:any-link%20{%20%20%20%20%20position:%20relative;%20%20%20%20%20color:%20hsl(200,%20100%,%2050%);%20%20%20%20%20text-decoration:%20none;%20}%20%20:any-link::after%20{%20%20%20%20%20position:%20absolute;%20%20%20%20%20right:%20-0.05em;%20%20%20%20%20bottom:%200.05em;%20%20%20%20%20left:%20-0.05em;%20%20%20%20%20content:%20"";%20%20%20%20%20border-bottom:%200.1em%20solid;%20%20%20%20%20transition:%20transform%20100ms%20ease-out;%20}%20%20:any-link:not(:hover)::after%20{%20%20%20%20%20transform:%20rotateY(90deg);%20}%20</style>%20<a%20href="#">Hello%20World</a>> (inlined content from above)
2. select the `::after` element
 => the `:any-link:not(:hover)::after` rule is visible
3. right-click (make sure to NOT change the selection) on the `<a>` and select "Force Pseudo-Classes > Hover"
 => an "underline" should animate into existence underneath the "Hello World" text
 => the `:any-link:not(:hover)::after` rule is STILL visible in the styles sidebar
4. select a different node and then back to the `::after`
 => the `:any-link:not(:hover)::after` rule is no longer visible

Repeating steps 2-4, but instead DESELECTING "Force Pseudo-Classes > Hover", will have the same issue.

[Radar WebKit Bug Importer]

<rdar://problem/52062028>

[Devin Rousso]

(In reply to Devin Rousso from comment #0)
> 3. right-click (make sure to NOT change the selection) on the `<a>` and select "Force Pseudo-Classes > Hover"
Another way of doing this is to check the "Hover" checkbox at the top of the Styles sidebar when the `::after` node is selected.