title: CSS ::Before on Table Cell
body: <p>I want to add a <code>::before</code> selector on some table cells what has a <code>position:absolute</code> , but it fails:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{ border:1px solid #ccc; padding:10px; }
  table td{ border:1px solid #ccc; padding:5px; }
  
  .useBefore::before{
    content:'before';
    position:absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
         &lt;tbody&gt;
           &lt;tr&gt;
             &lt;td&gt;bird&lt;/td&gt;
             &lt;td&gt;animal&lt;/td&gt;
             &lt;td&gt;nature&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class='useBefore'&gt;
             &lt;td&gt;building&lt;/td&gt;
             &lt;td&gt;robot&lt;/td&gt;
             &lt;td&gt;city&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I noticed that if I add the <code>::before</code> to all of the <code>tr</code>'s then it works:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{ 
      border:1px solid #ccc; 
      padding:10px;
    }
    table td{
      border:1px solid #ccc;
      padding:5px;
    }
    
    tr::before{
      content:'before';
      position:absolute;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;bird&lt;/td&gt;
          &lt;td&gt;animal&lt;/td&gt;
          &lt;td&gt;nature&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class='useBefore'&gt;
          &lt;td&gt;building&lt;/td&gt;
          &lt;td&gt;robot&lt;/td&gt;
          &lt;td&gt;city&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this is not what I want, because I want to add it only on some of them.</p>