解决Safari中表格行伪元素定位兼容性问题：tr:after失效与替代方案

<table class="context-menu">
  <tr>
    <td>Cut</td>
    <td>Ctrl+X</td>
  </tr>
  <tr class="spacer">
      <td></td> <!-- 添加空的td元素 -->
      <td></td> <!-- 根据需要添加更多td -->
  </tr>
   <tr>
    <td>Copy</td>
    <td>Ctrl+C</td>
  </tr>
  <tr class="disabled">
    <td>Paste</td>
    <td>Ctrl+V</td>
  </tr>
</table>

/* 保持 tr.spacer 的相对定位和高度 */
table.context-menu tr.spacer {
  position: relative;
  height: 8px;
}
/* 将伪元素附加到 td 上 */
table.context-menu tr.spacer td:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /* 确保从 td 的左侧开始 */
  bottom: 0;
  margin: auto 0;
  height: 1px;
  width: 100%; /* 宽度覆盖 td */
  background-color: var(--item-disabled);
}
/* 其他表格样式 */
table.context-menu {
    --item-active: #316ac4;
    --item-disabled: #ABA89A;
    list-style: none;
    position: absolute;
    left: 0;
    padding: 2px;
    margin: 0;
    color: #000;
    background-color: #FFF;
    border: 1px var(--item-disabled) solid;
    border-collapse: separate;
    border-spacing: 0px;
    min-width: 10em;
}
table.context-menu > tbody > tr > td {
  white-space: nowrap;
  padding: 4px 1em;
}
/* ... 其他相关样式 ... */

<menu class="context-menu">
  <li class="grid">
    <span>Cut</span>
    <span>Ctrl+X</span>
  </li>
  <li class="spacer"></li> <!-- 作为分隔符的独立列表项 -->
  <li class="grid">
    <span>Copy</span>
    <span>Ctrl+C</span>
  </li>
  <li class="grid disabled">
    <span>Paste</span>
    <span>Ctrl+V</span>
  </li>
</menu>

menu.context-menu {
    --item-active: #316ac4;
    --item-disabled: #ABA89A;
    list-style: none; /* 移除默认列表样式 */
    box-sizing: border-box;
    padding: 2px;
    position: absolute; /* 如果是上下文菜单，可能需要绝对定位 */
    left: 0;
    width: 100%;
    border: 1px solid var(--item-disabled);
}

.grid {
    display: grid; /* 使用CSS Grid布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，等宽 */
    justify-content: space-between; /* 内容两端对齐 */
    border-width: 1px 0 0 0; /* 可选：顶部边框 */
}

.grid > span {
    padding: 5px;
    white-space: nowrap;
}

.grid > span:last-child {
    text-align: right; /* 第二列右对齐 */
}

.grid:not(.disabled):hover {
    background-color: var(--item-active);
    color: #fff;
}

.grid.disabled {
    color: var(--item-disabled);
}

.spacer {
    height: 1px; /* 分隔线高度 */
    border: solid var(--item-disabled);
    border-width: 0 0 1px 0; /* 底部边框作为分隔线 */
    margin: 2px; /* 留出一些上下空间 */
}