Tags on meta look bad when hovered

Question

When you hover the mouse cursor over a (non-required, non-mod) tag here on meta, the tag background turns gray. Except for the little tab on the left, which doesn't:

The problem is that the CSS rule that causes this hover effect:

.post-tag:hover {
    color: #333;
    background-color: #E0E0E0;
}

does not apply to the extra tab (which is a CSS ::before pseudo-element), since it already has its own background color, and so does not inherit the gray background from its parent element.

To fix the problem, the selector simply needs to be changed to:

.post-tag:hover, .post-tag:not(.moderator-tag):hover::before {
    color: #333;
    background-color: #E0E0E0;
}

Answer 1

I think we can call this status-completed (although status-norepro would also work), as tags have been normalized across the network, such that we no longer have tags that look like the bullets in the question's screenshot.

This happened as part of the Stack Exchange Network-wide standardised site design rollout:

...there are several things that will now be standardized to follow the look and feel on Stack Overflow...

Standardized items will include:

• Navigation
• Fonts
• Buttons/Icons
• Tags
• Newsletter ads

Arqade's site design rollout was announced/discussed here.