如何让表格单元格中的文字显示在伪元素圆点之上？

通过为 `

` 设置 `z-index: 0` 建立层叠上下文，并将伪元素 `::before` 的 `z-index` 设为负值（如 `-1`），即可确保文字始终位于黄色圆点上方，解决遮挡问题。

在实现吉他指板（fretboard）可视化表格时，常需同时展示标记（如黄色圆点）和音符文字（如 “A”）。但默认情况下，使用 ::before 伪元素绘制的圆点会自然覆盖单元格内的文本内容——这是因为伪元素默认参与父元素的层叠上下文，且未显式设置 z-index 时其堆叠顺序可能高于文本流内容。

关键解决方案在于主动控制层叠上下文与层级关系：

• ✅ 为 元素添加 position: relative 和 z-index: 0：这会创建一个新的层叠上下文（stacking context），使该单元格成为其子元素（包括伪元素和文本）的层叠参考容器；

• ✅ 将 td.selected::before 的 z-index 设为 -1：使其明确位于该上下文的底层，而单元格内常规文本（作为“层叠级别 0”内容）自动显示在其上方；
• ❌ 不要省略 z-index: 0 在 上：若仅设伪元素 z-index: -1 而父元素无层叠上下文，则负 z-index 可能将其推至整个页面背景层之下，导致不可见。

  以下是修正后的完整 css 与 html 示例：

  table {   background: black;   border-collapse: collapse; } td {   position: relative;   z-index: 0; /* 关键：创建层叠上下文 */   width: 40px;   height: 40px;   text-align: center;   color: transparent; /* 初始隐藏文字，hover 时再显示 */   font-weight: bold; } td.selected::before {   content: '';   position: absolute;   left: 50%;   top: 15%;   transform: translateX(-50%); /* 更精准居中 */   background: yellow;   width: 16px;   height: 16px;   border-radius: 50%;   z-index: -1; /* 关键：置于文字下方 */ } td.show {   color: red; /* hover 或激活状态显示文字 */ }

     
       
  A
       
  B
       
  C
     
   

  ? 额外提示：

  • 使用 transform: translateX(-50%) 替代纯 left: 50% 可更精确水平居中圆点；
  • 若需支持多状态（如不同颜色/形状标记），建议用 CSS 自定义属性（–dot-color）配合 ::before 动态控制，提升可维护性；
  • 避免对 ::before 使用 z-index: 0 或正值——这反而可能再次遮挡文字，除非你刻意构建多层覆盖效果。

  该方案轻量、兼容性强（支持所有现代浏览器及 IE11+），无需 javaScript，纯粹依靠 CSS 层叠规则达成语义清晰、视觉准确的指板交互表现。