如何忽略 ::before 伪元素的元素填充？

【问题标题】：How to ignore element padding for ::before pseudo element?如何忽略 ::before 伪元素的元素填充？
【发布时间】：2017-06-23 00:02:14
【问题描述】：

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

这个解决方案好吗？

我也尝试使用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;
}

【问题讨论】：

标签： html css css-position pseudo-element

【解决方案1】：

使用left: 0 很好。这是正确的方法。

除非您没有在 .block-header 元素上指定 position: relative。

考虑一下：

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

.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;
}

&lt;div class="block-header"&gt;test&lt;/div&gt;

更多信息请参见MDN。

【讨论】：