css - Is it possible to use pseudo-elements (:after, :before) inside a table row?

Question

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>

Answer 1

In this example, you are using the ::after and ::before pseudo-elements to add content after or before a table row, which essentially will break the table layout and lead to unpredictable results.

If you were to add the generated content to a table-cell, the results would be more consistent.

There is not much to refer to except the original specification for generated content:

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

In addition, keep in mind that the CSS rendering engine generates anonymous boxes when creating tables:

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

However, since generated content is not part of the DOM, the whole table-rendering process probably cannot deal with the extra pseudo-element in a sensible way.

You are delving into an area that is not well specified and any support will be browser specific.

Depending on your layout requirements, you might need to use JavaScript or jQuery to alter the DOM of the table to the desired effect.