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?

Because you've positioned it using `position: absolute`, and none of its ancestors have a non-`static` `position` property; so it's positioned relative to the view-port. — David Thomas, Feb 23 '17 at 15:38
@DavidThomas ok in undestand. but i need position absolute to overlay the two texts. — nicoschuck, Feb 23 '17 at 15:41

score 3 · Accepted Answer · edited May 23 '17 at 12:25

3

#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>

edited May 23 '17 at 12:25

Community

answered Feb 23 '17 at 15:39

Michael Benjamin

score 0 · Answer 2 · answered Aug 10 '17 at 15:15

0

Alternatively, without transformation:

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

answered Aug 10 '17 at 15:15

Dmitry Sheiko

2 Answers2