I want to add absolutely positioned element as an :after
(of :before
) of a table row.
Look at this:
table {
border: 1px dotted gray;
border-collapse: collapse;
border-spacing: 0;
td {
padding: 0;
margin: 0;
width: 100px;
background: rgba(255, 0, 0, 0.2)
}
}
table.a .special::before {
content: 'a';
}
table.b .special::before {
content: 'a';
display: block;
position: absolute;
right: 10px;
}
table.c .special::after {
content: 'a';
display: block;
position: absolute;
right: 10px;
}
table.d .special .after {
display: block;
position: absolute;
right: 10px;
top: 0;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class='special'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br/>
<table class="a">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class='special'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br/>
<table class="b">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class='special'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br/>
<table class="c">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class='special'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<Br/>
<table class="d">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class='special'>
<td>1</td>
<td>2</td>
<td>3</td>
<div class='after'>a</div>
</tr>
</table>
See Question&Answers more detail:os