如何让吉他指板表格中TD的文本显示在selected类黄色圆点上方？

问题核心是黄色圆点（伪元素）的层级比文本高，调整层级关系就能让文本显示在圆点上方，以下是两种简单可行的实现方式：

方式一：降低伪元素层级 #

把td.selected::before的z-index改为-1，让黄色圆点处于文本下方：

table {
    background: black;
}
td {
    position: relative;
    width: 40px; /* 补充单位，否则宽度设置无效 */
    text-align: center;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: -1; /* 修改此处层级 */
    transform: translateX(-50%); /* 让圆点水平居中，修正left:50%的偏移问题 */
}

td.show {       
    color: red;     
}

方式二：提升文本层级 #

给单元格内的文本套一个<span>标签，通过设置相对定位和更高层级让文本显示在圆点上方：

修改后的CSS： #

table {
    background: black;
}
td {
    position: relative;
    width: 40px;
    text-align: center;
}
td.selected::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    background: yellow;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 1;
    transform: translateX(-50%);
}

td.show span {       
    color: red;
    position: relative;
    z-index: 2; /* 让文本层级高于圆点 */
}

修改后的HTML： #

<table>
    <tr>
        <td class="show selected"><span>A</span></td>
    </tr>
</table>

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