CODEWITHSUNDEEP
htmlcsspseudo-element
nicoschuck
nicoschuck

Reputation: 199

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?

Upvotes: 0

Views: 255

Answers (2)

Dmitry Sheiko
Dmitry Sheiko

Reputation: 2182

Alternatively, without transformation:

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

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371003

#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

Upvotes: 3

Related Questions