using :before (or :after) on table tr's

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: "";
}