How to position a CSS pseudo-element to the left of a table row

Question

I am trying to create a pseudo-element on the first td element of some tr elements with a certain class. The table itself is contained within a scrollable container.

What I want to achieve is that the pseudo-element is rendered outside the table, and to the left of said rows, to be precise. I tried everything, like putting overflow-x: visible to all elements, but no luck.

What am I missing?

.container {
  height: 5rem;
  overflow-y: auto;
  width: fit-content;
  margin: 2rem;
  background: #eeddcc;
  overflow-x: visible;
  
  table {
    border-collapse: collapse;
    border: 1px solid #ccc;
    overflow-x: visible;
    
    td {
      border: 1px solid #ccc;
      padding: .2rem .5rem;
      overflow-x: visible;
      
      div {
        position: relative;
        overflow-x: visible;
        
        &::after {
          content: '❤️';
          position: absolute;
          left: -1rem;
        }
      }
    }
  }
}

<div class="container">
  <table>
    <tr>
      <td>
        <div>Cell A1</div>
      </td>
      <td>Cell A2</td>
    </tr>
    <tr>
      <td>
        <div>Cell B1</div>
      </td>
      <td>Cell B2</td>
    </tr>
    <tr>
      <td>
        <div>Cell C1</div>
      </td>
      <td>Cell C2</td>
    </tr>
    <tr>
      <td>
        <div>Cell D1</div>
      </td>
      <td>Cell D2</td>
    </tr>
    <tr>
      <td>
        <div>Cell E1</div>
      </td>
      <td>Cell E2</td>
    </tr>
  </table>
</div>

Answer 1

Try giving the pseudo element some room by making .container slightly larger and shifting the table to right.

.container {
  height: 5rem;
  overflow-y: auto;
  width: fit-content;
  padding-left: 33px;
  margin: 2rem;
  display: flex;
  justify-content: flex-end;
  table {
    border-collapse: collapse;
    border: 1px solid #ccc;
    background: #eeddcc;
    tr.heart {
      div {
        position: relative;
        overflow-x: visible;
        &::after {
          content: '❤️';
          position: absolute;
          left: -33px;
        }
      }
    }
    td {
      border: 1px solid #ccc;
      padding: .2rem .5rem;
    }
  }
}

<div class="container">
  <table>
    <tr>
      <td>
        <div>Cell A1</div>
      </td>
      <td>Cell A2</td>
    </tr>
    <tr class="heart">
      <td>
        <div>Cell B1</div>
      </td>
      <td>Cell B2</td>
    </tr>
    <tr>
      <td>
        <div>Cell C1</div>
      </td>
      <td>Cell C2</td>
    </tr>
    <tr>
      <td>
        <div>Cell D1</div>
      </td>
      <td>Cell D2</td>
    </tr>
    <tr class="heart">
      <td>
        <div>Cell E1</div>
      </td>
      <td>Cell E2</td>
    </tr>
  </table>
</div>

Answer 2

You can add padding-left to the container to insert there ❤️. Something like this:

.container {
  height: 5rem;
  overflow-y: auto;
  width: fit-content;
  margin: 2rem;
  padding-left: 2rem;
  table {
    border-collapse: collapse;
    border: 1px solid #ccc;
    background: #eeddcc;
    td {
      border: 1px solid #ccc;
      padding: .2rem .5rem;
      overflow-x: visible;
      position: relative;
    }
    .heart td:first-child::after {
      content: '❤️';
      position: absolute;
      right: 100%;
      width: 2rem;
      text-align: center;
    }
  }
}

<div class="container">
  <table>
    <tr class="heart">
      <td>Cell A1</td>
      <td>Cell A2</td>
    </tr>
    <tr class="heart">
      <td>Cell B1</td>
      <td>Cell B2</td>
    </tr>
    <tr class="heart">
      <td>Cell C1</td>
      <td>Cell C2</td>
    </tr>
    <tr>
      <td>Cell D1</td>
      <td>Cell D2</td>
    </tr>
    <tr class="heart">
      <td>Cell E1</td>
      <td>Cell E2</td>
    </tr>
  </table>
</div>