Question

I’m trying to apply a pseudo element to a <tr> but turns out it’s not working as expected. I’m not sure if i’m missing anything or if it’s just simply not possible.

Here’s a jsfiddle example: http://jsfiddle.net/jDwCq/

Notice that if you change the display of tr to display: block;, the pseudo element will show up, but it is displayed as a block rather than a table, which i need.

Is it possible or am I doomed?

Answer 1

    tr:hover td{
      background: pink or whatever;
    }
tr:hover td:after{
  background: yellow;
}

I don’t see the need for pseudo elements.

I will say that having an element, which isn’t a cell, directly inside a row, is asking for pain.
You could always have a pseudo-element inside every cell of a targeted row, though. With the right css, there will be no perceptible difference.

Example: http://jsfiddle.net/jDwCq/7/