CSS :: Antes de celda de tabla

Question

Quiero añadir un selector ::before en algunas celdas de la tabla lo que tiene un position:absolute, pero fracasa:

table{ border:1px solid #ccc; padding:10px; } 
 
table td{ border:1px solid #ccc; padding:5px; } 
 

 
.useBefore::before{ 
 
    content:'before'; 
 
    position:absolute; 
 
}

<table> 
 
     <tbody> 
 
     <tr> 
 
      <td>bird</td> 
 
      <td>animal</td> 
 
      <td>nature</td> 
 
     </tr> 
 
     <tr class='useBefore'> 
 
      <td>building</td> 
 
      <td>robot</td> 
 
      <td>city</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

me di cuenta de que si añado el ::before a todos los tr 's entonces funciona:

table{ 
 
    border:1px solid #ccc; 
 
    padding:10px; 
 
    } 
 
    table td{ 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    } 
 
    
 
    tr::before{ 
 
    content:'before'; 
 
    position:absolute; 
 
    }

<table> 
 
    <tbody> 
 
     <tr> 
 
     <td>bird</td> 
 
     <td>animal</td> 
 
     <td>nature</td> 
 
     </tr> 
 
     <tr class='useBefore'> 
 
     <td>building</td> 
 
     <td>robot</td> 
 
     <td>city</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Pero esto no es lo que quiero, porque quiero agregarlo solo en algunos de ellos.

Answer 1

No estoy seguro de por qué falla exactamente, pero podría agregarlo en la primera celda de la tabla.

.useBefore td:first-child:before{ 
    content:'before'; 
    position:absolute; 
    }