Adding :before/:after CSS rule in Safari's inspector

I'm trying to add, via the web inspector, :before/:after CSS rules in Safari's Web Inspector. However, when I try to add a new rule, Safari only lets me add a rule that's specific to the classes that the element already has, and won't let me edit this.

I can't figure out how to add a new CSS rule that applies to its :before or :after via inspector. For example, if my div is below, how do I add :before to the rule?