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

css css-selectors pseudo-element

13,889

Solution 1

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.

Solution 2

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;
}

13,889

Author by

Robert Koritnik

Remote web developer, consultant, enthusiast, geek.

Updated on June 04, 2022

Comments

Robert Koritnik almost 2 years
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.
Robert Koritnik about 13 years

I edited my question just before you've submitted your answer. For compatibility reasons I would like to avoid special selectors...
BoltClock about 13 years

@Robert Koritnik: See my edit. > has better compatibility with IE than ::after.
Robert Koritnik about 13 years

You're right. If I'm using pseudo elements I shouldn't have problems using advanced selectors either. :) And I'm using single double-collon notation anyway. I've just written it here in the more strict (by spec) way.
Robert Koritnik about 13 years

I don't think you cleared them actually, but rather re-defined them with different content.
steveax about 10 years

Note that screen readers do not reliably announce generated content so users that employ them will not be aware of the asterisks.