html - :after 元素意外高度行为

Question

有人可以解释为什么 :after 元素高度取决于顶级属性值吗？

.bar {
  width: 30px;
  height: 2px;
  background-color: white;
  position: absolute;
  justify-content: center;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}
/* Height of bar match to main element 2px */
.bar:before {
  content: '';
  width: 30px;
  height: 2px;
  top: -11px; /* It works */
  background-color: inherit;
  position: absolute;
}
/* Height of bar doesn't match to main element 2px */
.bar:after {
  content: '';
  width: 30px;
  height: 2px;
  top: 10px; /* It doesn't work */
  background-color: inherit;
  position: absolute;
}

https://codepen.io/konrad9000/pen/wvBawEm

标签： htmlcss

Answer 1

我大概知道为什么会这样了。在 Windows 显示设置比例较小的全高清显示器上，默认设置为 125%。因此浏览器窗口的宽度也被缩放。