css: 如何防止绝对定位的 :after 元素在过渡期间缩放？

Question

我在左下角有一个 absolutely positioned 按钮。大小固定为15px width and height.

该按钮有一个 :after 元素来增加可点击区域的大小。

当您将鼠标悬停在按钮上时，按钮会展开。但这也会增加 :after 元素的大小。

如何防止 :after 元素与 button 元素发生 scaling scale(1.5)？

我尝试使用 width 和 height 属性，但这弄乱了定位。

body {
position: relative;
height: 100vh;
padding:0;
margin: 0;
}

p {
margin: 0;
padding: 0;
}

button {
      cursor: pointer;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      color: white;
      border: none;
      background: #ffd86e;
      position: absolute;
      bottom: 15px;
      left: 15px;
      z-index: 10000;
    }

    button::after {
      content: '';
      /* z-index: -100000; */
      position: absolute;
      bottom: 50%;
      left: 50%;
      height: 50px;
      width: 50px;
      transform: translate(-50%, 50%);
      background: transparent;
      border: 1px solid black;
    }

    button:hover {
      transform: scale(1.5);
      transition: transform 0.2s;
    }

<p>element is left bottom corner</p>


<button></button>

Answer 1

反转应用的样式 I.E.将应用到按钮的样式应用到 :after 元素，反之亦然。因为否则 :after 元素也会在悬停在按钮

上时展开

button {
  position:relative;
  border:1px solid #000;
  display: block;
  padding: 1.5rem 2.5rem;
}

button::after {
  content: '';
  z-index: -100000;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  
  display: block;
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  color: white;
  border: none;
  background: red;
  z-index: 10000;   
}

button:hover:after {
  transform: translate(-50%, 50%) scale(1.5);
  transition: transform 0.2s;
}

<p>element is left bottom corner</p>
<button></button>

Answer 2

创建第二个按钮作为伪装。比你想要的按钮已给出 class="orgBut" 并且将负责添加边框的伪装按钮已给出 class="afBut".
两者具有相同的位置和属性，只是 afBut 的 z-index 设置为 0 以便它位于 orgBut.

之后

::after 选择器被提供给 afBut，即原始按钮后面的伪装按钮。并且 hover 效果被赋予 orgBut.

就是这样。
当您将鼠标悬停在原始按钮上方时，光标永远不会移动到它后面的按钮，这就是您设置的边框不受影响的原因。

代码已附上！！

`.orgBut {
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  color: white;
  border: none;
  background: #ffd86e;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 10000;
}

.afBut {
    cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  color: white;
  border: none;
  background: #ffd86e;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 0;
}

.afBut::after {
  content: '';
  /* z-index: -100000; */
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  transform: translate(-50%, 50%);
  background: transparent;
  border: 1px solid black;
}

.orgBut:hover {
  transform: scale(1.5);
  transition: transform 0.2s;
}`

<p>element is left bottom corner</p>
<button class="orgBut"></button>
<button class="afBut"></button>

如有任何其他问题，请随时提出来

css: 如何防止绝对定位的 :after 元素在过渡期间缩放？

css: how to prevent absolutely positioned :after element from scaling during transition?

css

animation

css-animations

css-transitions