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

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是罰款。這是正確的方法。

除了您沒有在.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; 
 
}

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

更多信息請參見MDN。