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?*

```css
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);

    }
```

```html
<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>
```