centering a pseudo element

问题

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?

回答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

回答2:

Alternatively, without transformation:

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

来源：https://stackoverflow.com/questions/42420062/centering-a-pseudo-element