当六边形形状变为方形时，CSS悬停效果不起作用

<style>
  .hexagon {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ccc;
    transform: rotate(45deg);
  }

  .hexagon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
  }

  .hexagon:hover::before {
    background-color: #ff0000;
  }
</style>

<div class="hexagon"></div>

<style>
  .square {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 100,25 100,75 50,100 0,75 0,25"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
  }

  .square:hover {
    background-color: #ff0000;
  }
</style>

<div class="square"></div>