how to center pseudo-element?

**jjshell** · Feb 12, 2013 02:16

Hello,
please consider the following code:

Code:

.pseudo:after {
content: "hello";
display: block;
}

Code:

<p class="pseudo">some content, not too long</p>

Is there a way to center that pseudo element in regards to the width of <p>? The pseudo element should appeared centered under the text displayed in <p>.

I tried with position absolute, with a negative value for bottom (so far so good), but I can't get things to get centered.

Regards,

-jj.

**ralph.m** · Feb 12, 2013 02:27

I have to rush off now, but couldn't resits a quick experiment. No doubt better ways, but ...

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.pseudo {display: table;}
.pseudo:after {
content: "hello";
display: block;
text-align: center;
}
</style>
	
</head>
<body>

<p class="pseudo">some content, not too long</p>

</body>
</html>

**markbrown4** · Feb 12, 2013 03:01

display: inline-block does the trick as well.

Is there a way to center that pseudo element in regards to the width of <p>?

Sure, just give it text-align: center;

What you're really asking is how to make the p the width of it's text.

**ralph.m** · Feb 12, 2013 06:01

Originally Posted by markbrown4

display: inline-block does the trick as well.

Yeah, I was going to suggest that, although it seemed to move the paragraph down a bit, so display: table seemed preferable here. (I probably should investigate why inline-block made the para jump down a bit, but I'm too lazy.

)

**Paul O'B** · Feb 12, 2013 08:02

Originally Posted by ralph.m

(I probably should investigate why inline-block made the para jump down a bit, but I'm too lazy.

)

It's the top margin on the p element causing the difference as the table (display:table) collapses the margin but inline-block does not (because it creates a new block formatting context). If you set p margin:0 then both routines work the same or if you set html,body to margin:0 then they both behave the same.

**ralph.m** · Feb 12, 2013 08:10

Thanks Paul.

I wonder if setting the p to display: inline-block or :table will cause layout issues. I guess only jjshell can tell us that.

**Paul O'B** · Feb 12, 2013 08:39

Originally Posted by ralph.m

Thanks Paul.

I wonder if setting the p to display: inline-block or :table will cause layout issues.

Yes it depends on the context. It may be that the p element didn't need to shrink to fit so could remain block.

User Tag List

Thread: how to center pseudo-element?

Thread Tools

Display

how to center pseudo-element?

Bookmarks

Bookmarks

Posting Permissions