:: before擬似要素の要素埋め込みを無視する方法は？

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を参照してください。