title: Remove ::before or ::after pseudo element CSS definition
body: <h2>Some background</h2>
  
  <p>I'm displaying forms in my application and I enclose each field (or a related set of them) in an <code>UL/LI</code> element. This is an example:</p>
  
  <pre><code>&lt;ul class="form"&gt;
      &lt;li class="required"&gt;
          &lt;label for="..."&gt;Field label&lt;/label&gt;
          &lt;div class="field"&gt;
              &lt;input type="text" ... /&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see I set a class <code>required</code> on required field's <code>LI</code> element, so when their <code>label</code> is displayed I define an <code>::after</code> pseudo element, that adds a red asterisk after it:</p>
  
  <pre><code>ul.form li.required label::after
  {
      content: " *";
      font-weight: bold;
      color: #f66;
  }
  </code></pre>
  
  <h2>The problem</h2>
  
  <p>The problem I'm having is when I have a list of checkboxes or radio buttons in my <code>&lt;div class="field"&gt;</code> container. To have labels beside radio buttons or checkboxes clickable, they must be contained in a <code>label</code>.</p>
  
  <pre><code>&lt;ul class="form"&gt;
      &lt;li class="required"&gt;
          &lt;label for="..."&gt;Radio button set&lt;/label&gt;
          &lt;div class="field"&gt;
              &lt;input type="radio" name="RBSet" value="1" id="RBSet1" /&gt;&lt;label for="RBSet1"&gt;First&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="RBSet" value="2" id="RBSet2" /&gt;&lt;label for="RBSet2"&gt;Second&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="RBSet" value="3" id="RBSet3" /&gt;&lt;label for="RBSet3"&gt;Third&lt;/label&gt;&lt;br/&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>The problem is of course that each label beside my radio button displays an asterisk because it's also contained inside the <code>li.required</code> element.</p>
  
  <h2>Question</h2>
  
  <p>How do I remove <code>::after</code> pseudo element from all <code>label</code> elements that are contained in a <code>div.field</code>? Do I have to actually define it but set its content to an empty string or is it possible to remove it all together?</p>
  
  <p>I could change my style definition for <code>::after</code> to</p>
  
  <pre><code>ul.form li.required &gt; label::after
  {
      content: " *";
      font-weight: bold;
      color: #f66;
  }
  </code></pre>
  
  <p>but I want to avoid these special CSS selectors for compatibility reasons.</p>