如何忽略元素填充：：在伪元素之前？

Question

下面是我对伪元素忽略填充的解决方案，但是它感觉有点“无趣”，因为我对伪元素使用了负值。

这个解决方案可以吗？

我也尝试使用left: 0; top: 0;，但是之后我将伪元素相对于页面的主体而不是元素进行定位。为什么？

CSS：

.block-header {
  background-color: #3A658B;
  height: 30px;
  width: 100%;
  line-height: 30px;
  color: white;
  font-size: 18px;
  border-radius: 3px;
  padding-left: 10px;
}
.block-header::before {
  content: '';
  position: absolute;
  margin-left: -10px;
  height: 30px;
  width: 10px;
  background-color: #1E3552;
  border-radius: 3px 0px 0px 3px;
}

Answer 1

使用left: 0是可以的。这是正确的方法。

但是您还没有在position: relative元素上指定.block-header。

考虑到这一点：

• 伪元素被认为是DOM元素的子元素.
• 绝对定位元素相对于其最近的定位祖先进行定位。
• 当没有定位祖先时，abspos元素相对于初始容器(即HTML元素/ viewport)定位。

​

.block-header {
  background-color: #3A658B;
  height: 30px;
  line-height: 30px;
  color: white;
  font-size: 18px;
  border-radius: 3px;
  padding-left: 10px;
  position: relative;      /* NEW */
}

.block-header::before {
  left: 0;                 /* NEW */
  content: '';
  position: absolute;
  height: 30px;
  width: 10px;
  background-color: #1E3552;
  border-radius: 3px 0px 0px 3px;
}

<div class="block-header">test</div>

​

有关详细信息，请参阅MDN。