Using: before (or: after) or tr tables
I am trying to get the effect of buttons sitting outside the table that correspond to the table rows they affect. I am trying to use pseudo elements for this. I can achieve this easily if I use: after the table row, however, if I use this before, it treats the pseudo-element as a new td on the table row and pushes all one td at a time, making the table unaligned.
<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 am using moveTableLevel class to add item to add buttons attached to table row
.moveTableLevel:before
position: relative
content: 'up'
If I use: after the desired effect works fine, however I don't want the button on the right side of the table. Is there a way to achieve this (perhaps using pseudo-elements) ?: before it seems to want to add a whole new td. Thank!
edit: fiddle here for a live example http://jsfiddle.net/9mLd6v9L/
source to share
I had a similar problem (almost exactly the same, in fact). What I ended up doing was using the :after
psuedo element but moving it to where I wanted it with position: absolute
and setting the style left: 0
.
So I updated your fiddle with this and added padding to the left side of the entire table (so you can see the content)
.moveTableLevel:after {
position: absolute;
content: 'up';
left: 5px;
}
This is contrary to my beliefs to use absolute positioning (which I think should be as small as possible), but that was the only way I could fix it. Hope this works for you too.
source to share