如何将 CSS 伪元素放置在表格行的左侧

Question

我试图在某些具有特定类的

td

元素的第一个

tr

元素上创建一个伪元素。表格本身包含在可滚动容器内。

我想要实现的是，伪元素呈现在表格的外部，准确地说是在所述行的左侧。我尝试了一切，比如将

overflow-x: visible

放在所有元素上，但没有运气。

我错过了什么？

.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

尝试通过使

.container

稍大并将表格向右移动来给伪元素一些空间。

.container {
  height: 5rem;
  overflow-y: auto;
  width: 180px;
  margin: 2rem;
  background: #eeddcc;
  display: flex;
  justify-content: flex-end;
  table {
    border-collapse: collapse;
    border: 1px solid #ccc;
    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>