Simple question about :after, :before (clearfix etc)

Asked

Viewed 89 times

1

I’ve seen some dev’s using so much display:block how much table in a after/before, but why use ? I think I know why to use the block but because the table?

What’s the difference?

Another question is about this *Zoom: 1;. Why use?

Code

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}
html5 css3

  • Article in English that can help you http://nicolasgallagher.com/micro-clearfix-hack/

1 answer

1


Difference between block and table, as its name suggests:

  • display: block: element will be rendered as block. 

.exemplo{
  display: block;
  border: solid 1px red;
}

.classeTeste{
  display:block;
  border: solid 1px red;
}
<div class="exemplo"> Teste
	<div class="classeTeste">
        Div 1
	  <div class="classeTeste">
	    Div 2
	  </div>
	</div>
</div>

  • display: table: the elements behave as <table>.

.exemplo{
  display: table;
  border: solid 1px red;
}

.classeTeste{
  display:table;
  border: solid 1px red;
}
<div class="exemplo"> Teste
	<div class="classeTeste">
        Div 1
	  <div class="classeTeste">
	    Div 2
	  </div>
	</div>
</div>

The estate zoom specifies the initial zoom factor for the window or viewing area. Think of it as a magnifying glass. See this example and a more detailed explanation in this Tutorial about Zoom.

:after and :before are called pseudo-elements and as the name itself already speaks, are used to insert a certain content before or after a certain element. Remember that pseudo-elements do not support several contents at the same time and insertion of HTML codes. For more details and examples see: :before and :after.

Useful links:

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.