如何在轮廓下隐藏:: before或:: after ？？

Question

我尝试过：

隐藏父级的溢出
• 使z-index变为负数
• on chromeon firefox

我已经注意到，仅当“轮廓”设置为“自动”时才会出现该问题。有什么想法可以解决它而不弄乱浏览器的默认轮廓吗？

谢谢。

#switch {
  position: relative;
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#switch:focus {
  outline: 5px dotted blue;
  outline-style: auto;
  z-index: 0;
}

#switch .mode {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a202c;
  transition: transform 0.45s ease;
}

#switch .mode::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -30%;
  left: 30%;
  border-radius: 50%;
  background: white;
  transition: transform 0.45s ease;
}

<button id="switch">
    <div class="mode"></div>
  </button>

[我已经尝试过：隐藏父级的溢出，使Firefox上的chrome上的z-index变为负数，我注意到，仅当'outline'设置为'auto'时，该问题才会出现。没有...的任何想法都可以解决它...

Answer 1

仅使用背景而不是伪元素来做不同的事情：