Pseudo elements on tables? - css

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

table tr:before{
position: relative; /* Needed for pseudo elem */
display: block; /*Uncomment me and see what happens*/
}
this should work...

Answer 2

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/

Answer 3

Just set display: inline-block; to TDs, and give them a width (~33% each)... and remove position: absolute from the pseudoelement.
That's it: http://jsfiddle.net/jDwCq/6/
table tr {
/*position: relative; /* (REALLY NOT) Needed for pseudo elem */
display: block; /*Uncomment me and see what happens*/
}
td {
width: 32.9%; /* ADD THIS */
display: inline-block; /* AND THIS */
}
table tr:after {
/*position: absolute; REMOVE THIS TOO */
top: 0px;
left: 0px;
display: block;
content: '';
text-indent: -99999px;
background: red;
height: 2px;
/*width: 100%; NOT NEEDED */
}

Answer 4

To make the rows appear bigger using ::before and/or ::after pseudo-elements you'd have to apply those elements to the td elements, but select the td elements based on the :hover of the tr:
td::before,
td::after {
/* defines the default states/sizes */
height: 0;
display: block;
content: '';
}
tr:hover td::before,
tr:hover td::after {
/* adjusts attributes based on the parent tr's :hover event */
height: 1em;
}​
JS Fiddle demo.
However, if the aim is to 'look cool1' then I'd suggest adjusting the styling of the td elements themselves (since that way they can be animated), rather than using the pseudo-elements which just 'appear':
td {
padding: 0;
-moz-transition: padding 1s linear;
-ms-transition: padding 1s linear;
-o-transition: padding 1s linear;
-webkit-transition: padding 1s linear;
transition: padding 1s linear;
}
tr:hover td {
padding: 1em 0;
-moz-transition: padding 1s linear;
-ms-transition: padding 1s linear;
-o-transition: padding 1s linear;
-webkit-transition: padding 1s linear;
transition: padding 1s linear;
}
JS Fiddle demo.
Of course using this approach, you can use transition effects on color, background-color, height, font-size border (-width or -color), and adjust the timing (as well as the easing).
To animate multiple properties it's easier to use the keyword all (rather than the individual property names).
Given that I'm over the age of thirty I'm having trouble defining, or even recognising, 'cool' these days; but my seven year old nephew assures me that animating the padding looks 'okay.' You may, perhaps, have to consult your own child-relatives for the coolness of alternative approaches.