Html 我可以让表行的：：after状态相对于其正常状态进行定位吗？

我正在尝试创建一个渐变底部边框来分隔我的表行

我正在使用表行的：：after状态创建边框，并尝试使用position:absolute将其定位在行的底部。我认为问题在于，表行的：：after状态将表元素视为具有定义位置的最近父元素，而不是表行的正常状态。我已经给出了表row position:relative，试图将：：after状态设置为相对于行的位置，但没有效果

有没有办法让：：after状态位于每行的底部而不是整个表的底部

.beat商店{
位置：相对位置；
显示：表格；
宽度：100%；
边界间距：0；
边界塌陷：塌陷；
边界半径：8px；
}
.beat-store_uu________________________宋{
显示：表格行；
位置：相对位置；
身高：6雷姆；
}
.beat-store_uuu宋：不是（：最后一个孩子）：：之后{
内容：“；
显示：内联块；
位置：绝对位置；
底部：0；
右：0；
宽度：计算（100%-6rem）；
高度：1px；
背景图像：线性渐变（向右，rgba（204，204，204，0），#CCCCC，rgba（204，204，204，0））；
z指数：10；
}

南极

嘻哈音乐

120
3:04
南极

嘻哈音乐

120
3:04
南极

嘻哈音乐

120
3:04

这可能会给你你想要的东西。我删除了：：after伪元素，因为我认为您使用的方法不适合该任务。您可能需要对

.beat-store\uuu-song

应用其他样式以获得所需的结果。很难预测在图像中使用占位符的时间

我认为您缺少的是使用

：：after

旨在在元素之后插入一些内容，而

：：after

伪元素中指定的任何样式仅适用于添加的内容。在您的情况下，添加的内容是空的

.beat商店{
位置：相对位置；
显示：表格；
宽度：100%；
边界间距：0；
边界塌陷：塌陷；
边界半径：8px；
}
.beat-store_uu________________________宋{
显示：表格行；
位置：相对位置；
身高：6雷姆；
}
.beat-store_uu宋：不是（：最后一个孩子）{
背景图像：线性渐变（向右，rgba（204，204，204，0），#CCCCC，rgba（204，204，204，0））；
背景重复：无重复；
背景位置：底部；
背景尺寸：钙（100%-6rem）1px；
}

南极

嘻哈音乐

120
3:04
南极

嘻哈音乐

120
3:04
南极

嘻哈音乐

120
3:04

我将您的代码移到了一个片段中，它似乎按照您的预期工作。你用的是什么浏览器？此外，您还可以考虑不要使用<代码>表>代码>。查看片段，我看到OP看到了什么：在表的底部只有1个梯度分隔符。Chrome版本83.0.4103.106（官方版本）（64位）这就成功了！谢谢，我从来没有想过要使用这样的背景属性。非常感谢。