居中伪元素

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