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.

Community · Accepted Answer · 2017-05-23 10:33:12Z

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, 2017 at 10:33

CommunityBot

11 silver badge

answered Feb 6, 2011 at 15:44

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robert Koritnik Over a year ago

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

BoltClock Over a year ago

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

Robert Koritnik Over a year ago

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.

steveax Over a year ago

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

Jakob Egger · Accepted Answer · 2011-02-06 15:57:06Z

1

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

edited Feb 6, 2011 at 15:57

answered Feb 6, 2011 at 15:50

Jakob Egger

12.1k4 gold badges42 silver badges48 bronze badges

Comments

mVChr · Accepted Answer · 2011-02-06 15:49:22Z

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 6, 2011 at 15:49

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

1 Comment

Robert Koritnik Over a year ago

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

Collectives™ on Stack Overflow

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

Some background

The problem

Question

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Some background

The problem

Question

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related