如何在滚动容器中将CSS伪元素定位到表格行左侧？

核心问题 #

你之前的尝试无效，主要有两个原因：

• 表格元素不支持overflow属性：table、tr、td这类表格布局元素，浏览器会直接忽略overflow设置，哪怕你写了overflow-x: visible也没用。
• 滚动容器的overflow规则限制：当容器设置了overflow-y: auto/scroll时，CSS规范强制要求overflow-x: visible被计算为auto，目的是防止横向溢出破坏布局，所以你设置的overflow-x: visible根本不会生效。

可行解决方案 #

推荐用「滚动容器预留左侧空间 + 伪元素相对单元格定位」的方案，简单且易维护：

修改后的代码 #

CSS

.container {
  height: 5rem;
  overflow-y: auto;
  width: fit-content;
  margin: 2rem;
  background: #eeddcc;
  /* 给伪元素预留左侧显示空间 */
  padding-left: 1.5rem;
}

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 100%;
}

/* 给目标行（带特定类的tr）的第一个单元格设置相对定位 */
tr.highlight-row td:first-child {
  position: relative;
}

/* 伪元素定位到单元格左侧，落在滚动容器的内边距区域 */
tr.highlight-row td:first-child::before {
  content: '❤️';
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐行 */
}

td {
  border: 1px solid #ccc;
  padding: .2rem .5rem;
}

HTML

<div class="container">
  <table>
    <!-- 给需要加伪元素的tr加highlight-row类 -->
    <tr class="highlight-row">
      <td>Cell A1</td>
      <td>Cell A2</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
    </tr>
    <tr class="highlight-row">
      <td>Cell C1</td>
      <td>Cell C2</td>
    </tr>
    <tr>
      <td>Cell D1</td>
      <td>Cell D2</td>
    </tr>
    <tr class="highlight-row">
      <td>Cell E1</td>
      <td>Cell E2</td>
    </tr>
  </table>
</div>

方案原理 #

1. 给滚动容器加padding-left，专门用来放伪元素，避免被容器裁剪；
2. 把伪元素直接挂载到目标行的第一个<td>上，用position: absolute定位到单元格左侧，同时通过transform垂直居中，保证和行内容对齐；
3. 去掉了所有无效的overflow-x: visible设置，遵循浏览器的布局规则。

内容的提问来源于stack exchange，提问作者AsGoodAsItGets