using :before (or :after) or table tr's - html

Question

I am trying to get the effect of buttons sitting outside of the table that are in line with the table rows they effect. To do this, I am trying to use the pseudo elements. I can achieve this easily if I use the :after on the table row, however if i use before, it treats the pseudo element as a new td in the table row and pushes everything over one td, making the table un-aligned.
<table class="saInstrcutionTable">
<thead>
<tr>
<th></th>
<th>Level</th>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr class="saLevel">
<td><input type="checkbox" name="level1"></td>
<td>Level 1 Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="moveTableLevel">
<td><input type="checkbox"></td>
<td>1.01</td>
<td>A.Truck, B.Car, C. House</td>
<td>Say look at that, turn head and point</td>
<td>CLorem ipsum</td>
</tr>
<tr class="moveTableLevel">
<td><input type="checkbox"></td>
<td>1.02</td>
<td>A.Truck, B.Car, C. House</td>
<td>Say look at that, turn head and point</td>
<td>CLorem ipsum</td>
</tr>
<tr class="moveTableLevel">
<td><input type="checkbox"></td>
<td>1.03</td>
<td>A.Truck, B.Car, C. House</td>
<td>Say look at that, turn head and point</td>
<td>CLorem ipsum</td>
</tr>
<tr class="moveTableLevel">
<td><input type="checkbox"></td>
<td>1.04</td>
<td>A.Truck, B.Car, C. House</td>
<td>Say look at that, turn head and point</td>
<td>CLorem ipsum</td>
</tr>
</tbody>
</table>
I'm using the moveTableLevel class to add the item to add the buttons attached to the table row
.moveTableLevel:before
position: relative
content: 'up'
If i use :after the desired effect works fine, however I do not want the buttons on the right side of the table. Is there a way to achieve this (possibly using the pseudo elements)? :before seems to want to add a whole new td. Thanks!
edit: fiddle here for live example http://jsfiddle.net/9mLd6v9L/

Answer 1

I had a similar problem (almost exactly the same, actually). What I ended up doing was using the :after psuedo element, but moving it to where I wanted it with position: absolute and setting a left: 0 style.
So I updated your fiddle with this, and added a padding to the left side of the whole table (so you can see the content)
.moveTableLevel:after {
position: absolute;
content: 'up';
left: 5px;
}
It kind of goes against my beliefs of using absolute positioning (which I think should be as little as possible), but it was the only way I could fix it. Hopefully this will work for you too.

Answer 2

I just had the same problem. I found that I can simply re-adjust things by pushing the header as well:
table thead tr::before {
content: "";
}