::after with position:relative 在 Safari 中无法正确呈现

Posted 2023-03-04

【中文标题】::after with position:relative 在 Safari 中无法正确呈现

【英文标题】：::after with position:relative not rendering correctly in Safari

【发布时间】：2022-01-02 19:29:44

【问题描述】：

当伪元素tr::after 具有position: relative，而主元素tr 具有position: absolute 时，该伪元素在Safari 上的定位不正确。

你对如何让它在 Safari 上运行有什么建议吗？

tr 
  position: relative;


tr::after 
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 5px;
  border-bottom: 1px solid black;
  content: "";

<table>
  <tbody>
    <tr>
      <td>1-1 cell</td>
      <td>1-2 cell</td>
    </tr>
    <tr>
      <td>2-1 cell</td>
      <td>2-2 cell</td>
    </tr>
    <tr>
      <td>3-1 cell</td>
      <td>3-2 cell</td>
    </tr>
  </tbody>
</table>

铬

Safari

【参考方案1】：

最好将文本包裹在“span”中，并且已经为它创建了一个元素

span::after

【讨论】：

感谢您的建议，但事实并非如此。由于其他原因，我需要设置行的样式，而不是表格单元格。为了进一步解释，我将使用这个选择器作为tr:not(:last-child)::after