centering a pseudo element

Question

I want to set a pseudo element of a div on the original div.

The problem is that the text of the div is centered.

Here is an example:

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

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

Why is the pseudo element not affected by the div style?

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> 

Here's an explanation of the centering method: Element will not stay centered, especially when re-sizing screen

Answer 2

Alternatively, without transformation:

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