margin-top not working with :before

Question

Hi Guys,

I have inserted content using the :before pseudo-element for a class. I was trying to position this content using margin-top but firefox is simply ignoring the property. The code follows:

.bef {
  line-height: 2em;
  white-space: nowrap;
  font-size:24px;
  display: block;    
  }

.bef:before {
  display: block;
  margin-top:2em;
  padding: 0;
  color: #666666;
  content:"Hello";    
  }

Does anybody know why Firefox may be ignoring the margin-top property?

EDIT: Although margin-top is being totally ignored, margin-bottom:-Xem is working and I am able to move the :before element around

Answer 1

try making .bef display block also? just a guess that the containing element of the :before needs to be block so it can listen to the margin-top...

Answer 2

It appears that Darko Z is right.

http://jquery.nodnod.net/cases/577

Hypothetically, the first two test cases (separated by <hr>) should render identically, which they do in Gecko (via FF3.5/Mac), but Webkit (via Safari4/Mac) renders the :before and :after segments as inline. The third test case seems to imply that Webkit currently requires the triggering element to be block in order for the generated content to be block.

The spec isn't clear on what the correct behavior is. It may be worth raising a question on www-style to see which rendering engine's behavior is correct, then filing a bug with the incorrect rendering engine to get it fixed in future versions. Feel free to use my code as a test case.