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

Navigation
1

I've seen some dev's using both display:block and table in after/before , but why use? I think I know why I use block but because 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;
}
    
asked by anonymous 16.12.2016 / 07:41

1 answer

1

Difference between block and table , as the name itself 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 : elements behave like <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% cos_de% property specifies the initial zoom factor for the window or view area. Think of it as a magnifying glass. See this example and a more detailed explanation on this Zoom Tutorial .

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

Useful links:

16.12.2016 / 14:04
Pass ID to Controller JavaScript Request POST