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

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">
  开发者_如何学JAVA      <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.

You should just apply the pseudo-element to labels that are children of .required using the child combinator >:

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

The > combinator has better IE compatibility (IE7 and up) than the ::after pseudo-element (IE9 and up). If you're able to use ::after, there is no reason not to use >. In fact, IE support for pseudo-elements is so inconsistent that IE8 recognizes CSS2 :after but not CSS3 ::after. Your code would thus not work on IE8 unless you use :after, and to support IE7 and older you need a JavaScript fix.

Just go ahead with the child-of selector. If you look at this compatibility table you will see that all browsers that support :after also support the child-of selector >.

If you need maximum compatibility (with IE7), consider using a backround image rather than the :after tag. Example:

ul.form li.required label
{
  background: url(/images/star.png) top right no-repeat;
  padding-right: 10px;
}


ul.form li.required div.field label
{
  background: none;
  padding-right: 0px;
}

You could also clear the ::after content for all field labels:

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


ul.form li.required div.field label::after
{
    content: " ";
}