pseudo-element inside table [duplicate]

Question

I wanted to insert a pseudo-element ::before in table-row. To get it out of the flow I use absolute positioning. But I get some unexpected results.

If I apply it to all the tr elements it works fine. But in the second example table.two it doesn't work like that. I am not able to get the pseudo-element out of the flow.

The only difference is that I target a subset.

I have no special design in mind. I just wanted to style the table row with a bit more flexibility. Maybe with some fancy box-shadow?

table {
    	border: 1px solid black;
    	width: 300px;
    }
    td {	width: 33%; }
    
    /*  lets go */
    tr {
    	position: relative; /*  reference point for pseudo elements */
    }
    tr.two::before, table.two tr::before {
    	content: "test";
    	color: red; background: rgba(255,200,0,0.7);
    	position: absolute; top: 5%; left: 5%; bottom: 5%; right: 5%;
        z-index: -1;
        box-shadow: -1em 0 0.2em 0 rgba(255,200,0,0.4), 1em 0 0.2em 0 rgba(255,200,0,0.4);

    }

<table>
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr class="two">
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>
    
    <table class="two">
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>

Answer 1

The issue is that you are positioning the pseudo elements relatively to the tr which leads to undefined behavior:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

(http://www.w3.org/TR/CSS2/visuren.html#propdef-position).

Full credit to this answer https://stackoverflow.com/a/8502084/3400962 for finding this out.

This means you can't get the desired result by adding and positioning the pseudo element relatively to the tr.

To achieve the effect you are after, you can add and relatively position multiple pseudo elements to the td instead. The pseudo selectors first-child and last-child can be used to ensure that the box-shadow only applies to the ends of the tr.

table {
  border: 1px solid black;
  border-spacing: 0;
  width: 300px;
}
td {
  position: relative;
  width: 33%;
}
tr.two td::before,
table.two tr td::before {
  background: rgba(255, 200, 0, 0.7);
  bottom: 5%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 5%;
  z-index: -1;
}
tr.two td:first-child::before,
table.two tr td:first-child::before {
  box-shadow: -1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  color: red;
  content: "test";
  left: 5%;
}
tr.two td:last-child::before,
table.two tr td:last-child::before {
  box-shadow: 1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  right: 5%;
}

<table>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr class="two">
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>