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

下面是我对伪元素忽略填充的解决方案，但它感觉有点“粗糙”，因为我在伪元素上使用了负边距

这个解决方案行吗

我还尝试使用

left:0；排名：0，但是我得到了相对于页面主体而不是元素的伪元素。为什么?

CSS:

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

除非您没有在
块头
元素上指定
位置：相对

考虑这一点：


伪元素被视为其DOM元素的子元素
绝对定位的元素相对于其最近定位的祖先进行定位
如果没有定位的祖先，则将相对于初始容器（即HTML元素/视口）定位abspos元素


。块头{
背景色：#3A658B；
高度：30px；
线高：30px；
颜色：白色；
字号：18px；
边界半径：3px；
左侧填充：10px；
位置：相对；/*新*/
}
.block头：：之前{
左：0；/*新*/
内容：''；
位置：绝对位置；
高度：30px；
宽度：10px；
背景色：#1E3552；
边界半径：3px 0px 0px 3px；
}
测试
.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;
}