SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to center pseudo-element?

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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>

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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. )

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    (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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •