居中僞元素

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