擬似要素のセンタリング

Question

元のdivにdivの擬似要素を設定したいとします。

問題は、divのテキストが中央に配置されていることです。ここで

例です。

#a:after{ 
 
    content:"Text"; 
 
    position:absolute; 
 
    left:0; 
 
    color:red; 
 
}

<div style="width:100%;text-align:center;"> 
 
    <p id="a">Text</p> 
 
</div>

擬似要素のdivのスタイルに影響されないのはなぜ？

Answer 1

#a:after { 
 
    content: "Text"; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    color: red; 
 
}

<div style="width:100%;text-align:center;"> 
 
    <p id="a">Text</p> 
 
</div>

ここでのセンタリング方法の説明です：またElement will not stay centered, especially when re-sizing screen

Answer 2

、変換なし：

#a:after { 
    content: "Text"; 
    position: absolute; 
    left: 0; 
    display: block; 
    text-align: center; 
    width: 100%; 
    color: red; 
}