尝试将伪元素居中时，我有一个间隙

i have a gap when trying to center the pseudo element

提问人：Fire Gamer 提问时间：10/2/2023 最后编辑：Fire Gamer 更新时间：10/28/2023 访问量：65

问：

我有一个，我尝试在中心添加一个伪元素 但是当我尝试时，我得到了一个我无法消除的小间隙button::before

我使用 FireFox，这是运行代码时的结果

注意：

  • 我需要以::beforeposition: absolute;
  • 在实际代码中，正方形不是按钮的 100%，而是 50%。我这样做是为了弄清楚错误
  • 我不需要使用 but 居中填充正方形，因为在实际代码中它只是面积的 50%::before

enter image description here

它不应该有白色像素

body { 
    background: #111;
}

button {
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #07f;
    position: relative;
    background: #fff;
}

button::before { 
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0, 209, 105);
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}
<button></button>

HTML CSS 伪元素

评论

0赞 Fire Gamer 10/28/2023
问题是当按钮大小为奇数时，其中 50% 包含 0.5 像素，但 CSS 不支持像素的小数

答：

0赞 imhvost 10/2/2023 #1

添加 1px 并设置：button::beforebutton { overflow: hidden; }

body { 
  background: #111;
}

button {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #07f;
  position: relative;
  background: #fff;
  overflow:hidden;
}

button::before { 
  content: "";
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  left: 50%;
  top: 50%;
  translate:-50% -50%;
  background: rgb(0, 209, 105);
}
<button></button>

评论

0赞 Fire Gamer 10/2/2023
这是一种使错误清晰的方法，但在实际应用程序中，它不是 100% 100%
0赞 Fire Gamer 10/2/2023
感谢您的回答，但我不能在实际代码中这样做，我有一个不到按钮一半的圆圈，我需要将其居中，而不是让它填满按钮
0赞 imhvost 10/2/2023
答案中有 2 个操作选项。你检查过第二个选项吗？
0赞 Fire Gamer 10/2/2023
是的，我的问题是，在我的实际代码中，正方形只是按钮的 50%，我把它设为 100%，所以空白可以很清楚
0赞 imhvost 10/2/2023
请指定问题中的所有细微差别，以免浪费时间......
0赞 Fire Gamer 10/28/2023 #2

问题是当按钮大小为奇数时，其中 50% 包含 0.5 像素，但 CSS 不支持像素的小数

上一个：CSS 伪元素的翻译速度比主元素快

下一个：我无法将元素完全居中