Reputation: 34177

Perfectly centering content using css after pseudo selector

Can anyone explain what is happening here? Looking at the code below you would expect the two item to be aligned on top of each other. This does not seem to be the case.

HTML

<div class="BX"></div>

CSS

.BX{
  position:absolute;
  top:10px;
  left:10px;
  height:30px;
  width:30px;
}
.BX:after{
  content:"×";
  position:absolute;
  font-size:50px;
  top:0;
  left:0;
}

QUESTION

I am aware I can easily hack at the code to alter the absolute offset however I am more interested in understanding where the after selector is deriving its top left position from?

http://jsfiddle.net/793vk/

Upvotes: 0

Answers (6)

Ali Gajani

Reputation: 15091

Here are my two cents. At first, to diagnose the problem I set a overflow:hidden to the parent element .BX to study the problem. This is what I see. There is a clear overflow of the child element, and the overflow:hidden showcases that. But that still doesn't explain why the "pushing down" effect. Let's visualize how font-size and line-height are related.

enter image description here

The child class inherits the parent class' line-height and it is imperative we must over write it. The line-height is actually by default calculated using the font-size. An overflow occurs which is visualized by pre-line height and post-line height stages, as shown in the images above. Remember, line-height for centering things isn't the best idea. Note how the pivot just moves a step up.

So what's happening here. We aren't moving the "X" up wards magically in the plane, but we are just pivoting upon the same point and just placing it's container class to move a step up. This is evident from the distance of the bottom of the "X" to the ending outline line.

enter image description here

Why does line-height:30px work?

The common practice is to use the golden ratio's value 1.618 to calculate the perfect line height, i.e. line-height = font-size/1.618. If you take the current font-size of 50px and calculate the line-height = 50/1.618 = 30. You do get ~30px.

Reproducing the line-height explicitly

The reason the default line-height is that way is due to the formula line-height = font-size*1.2 which equals to 60px, in our case. (l = 50*1.2)

If you try to reproduce the line-height by explicitly hitting the property in CSS, doing line-height:60px, you will reproduce the line-height as set in default by the browser.

enter image description here

Upvotes: 4

G-Cyrillus

Reputation: 105853

Your pseudo element is bigger than it's parent, that is why it overflows.

Why is it bigger ? because of font-size, that gives it a min-height equal to font-size and a default line-height based on these 50px you are given.

To see it in action add borders or background-color to pseudo : http://jsfiddle.net/793vk/2/

Upvotes: 2

web-tiki

Reputation: 103750

The top offset of the pseudo element is created because of the default line-height applied with font-size:50px; it makes the pseudo element 59px high and centers its content verticaly.

You may change this behaviour by setting a custom line-height DEMO

Upvotes: 3