Remove ::before or ::after pseudo element CSS definition

Question

Some background

I'm displaying forms in my application and I enclose each field (or a related set of them) in an UL/LI element. This is an example:

<ul class="form">
    <li class="required">
        <label for="...">Field label</label>
        <div class="field">
            <input type="text" ... />
        </div>
    </li>
    ...
</ul>

As you can see I set a class required on required field's LI element, so when their label is displayed I define an ::after pseudo element, that adds a red asterisk after it:

ul.form li.required label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

The problem

The problem I'm having is when I have a list of checkboxes or radio buttons in my <div class="field"> container. To have labels beside radio buttons or checkboxes clickable, they must be contained in a label.

<ul class="form">
    <li class="required">
        <label for="...">Radio button set</label>
        <div class="field">
            <input type="radio" name="RBSet" value="1" id="RBSet1" /><label for="RBSet1">First</label><br/>
            <input type="radio" name="RBSet" value="2" id="RBSet2" /><label for="RBSet2">Second</label><br/>
            <input type="radio" name="RBSet" value="3" id="RBSet3" /><label for="RBSet3">Third</label><br/>
            ...
        </div>
    </li>
    ...
</ul>

The problem is of course that each label beside my radio button displays an asterisk because it's also contained inside the li.required element.

Question

How do I remove ::after pseudo element from all label elements that are contained in a div.field? Do I have to actually define it but set its content to an empty string or is it possible to remove it all together?

I could change my style definition for ::after to

ul.form li.required > label::after
{
    content: " *";
    font-weight: bold;
    color: #f66;
}

but I want to avoid these special CSS selectors for compatibility reasons.