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.

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

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.

edited May 23 '17 at 10:33

Community

1
1

answered Feb 06 '11 at 15:44

BoltClock

700,868
160
1,392
1,356

I edited my question just before you've submitted your answer. For compatibility reasons I would like to avoid special selectors... – Robert Koritnik Feb 06 '11 at 15:46
@Robert Koritnik: See my edit. `>` has better compatibility with IE than `::after`. – BoltClock Feb 06 '11 at 15:47
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 Feb 06 '11 at 15:52
Note that screen readers do not reliably announce generated content so users that employ them will not be aware of the asterisks. – steveax Mar 01 '14 at 08:42

Jakob Egger · Answer 2 · 2011-02-06T15:57:06.473

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

score 0 · Answer 3 · answered Feb 06 '11 at 15:49

0

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

answered Feb 06 '11 at 15:49

mVChr

49,587
11
107
104

2

I don't think you cleared them actually, but rather re-defined them with different content. – Robert Koritnik Feb 06 '11 at 15:54

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

Some background

The problem

Question

3 Answers3