In below code, the content inside the element should scale on hover (vertically centered scaling), but the attached absolute positioned pseudo-element (*) should stay in exactly the same place without any scaling. I my code the *-symbol unfortunately is scaling and altering it's position. Note: While I can't change the HTML markup, I'm free to define the 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Attach the ::before to the div instead of the 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>