Question

下面是我的伪元素忽略填充的解决方案，但它感觉有点“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;
}

Answer 1

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

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

考虑一下：

伪元素被视为其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;
}

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

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

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

1 个答案: