CSS实现吉他弦压品丝效果遇阻：z-index属性不生效问题求助

我尝试使用表格单元格与CSS实现吉他弦覆盖在品丝上方的效果，但z-index属性似乎不起作用：

.guitar-string {
  border-right: #aaa9ad; /* 银色（品丝） */
  border-right-width: 3px; 
  border-right-style: solid;
  position: absolute;
  z-index: 0;
}

.guitar-string::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--thickness);
  background-color: #efd5b8; /* 吉他弦颜色 */
  top: 50%;
  border-color: transparent;
  position: absolute;
  z-index: 1;
}

预期效果是银色品丝显示在吉他弦下方，但实际效果如下：

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