缩放元素，同时保持附加的伪元素就位且未缩放

Question

在下面的代码中，元素内的内容应该在悬停时缩放（垂直居中缩放），但是附加的绝对定位伪元素 (*) 应该保持在完全相同的位置而没有任何缩放。不幸的是，我的代码 * 符号正在缩放并改变它的位置。注意：虽然我无法更改 HTML 标记，但我可以自由定义 CSS.

table {
  margin: 3rem;
}

td {
  position: relative;
}

span {
  display: inline-block;
}

td div span::before {
  position: absolute;
  content: '*';
  top: -1rem;
  left: -4rem;
  right: -4rem;
  text-align: center;
  font-size: 80%;
}

div {
  padding: 1rem;
  background: lightgreen;
}

div:hover span {
  transform: scale(2.6);
}

<table>
  <tr>
    <td>
      <div><span>1</span></div>
    </td>
    <td>
      <div><span>2</span></div>
    </td>
    <td>
      <div><span>3</span></div>
    </td>
    <td>
      <div><span>4</span></div>
    </td>
    <td>
      <div><span>5</span></div>
    </td>
  </tr>
</table>

Answer 1

将 ::before 附加到 div 而不是 span:

    table {
      margin: 3rem;
    }

    td {
      position: relative;
    }

    span {
      display: inline-block;
    }

    td div::before {
      position: absolute;
      content: '*';
      top: -1rem;
      left: -4rem;
      right: -4rem;
      text-align: center;
      font-size: 80%;
    }

    div {
      padding: 1rem;
      background: lightgreen;
    }

    div:hover span {
      transform: scale(2.6);
    }

  <table>
    <tr>
      <td>
        <div><span>1</span></div>
      </td>
      <td>
        <div><span>2</span></div>
      </td>
      <td>
        <div><span>3</span></div>
      </td>
      <td>
        <div><span>4</span></div>
      </td>
      <td>
        <div><span>5</span></div>
      </td>
    </tr>
  </table>

缩放元素，同时保持附加的伪元素就位且未缩放

Scaling element while keeping an attached pseudo-element in place and unscaled

css

css-transitions

pseudo-element