居中伪元素

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>

居中方法解释如下：

Answer 2

或者，不进行转换：

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