Why this selector:after Piece of CSS Code is Used?

Question

I got this piece of code from here:

div.grid:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

Even when I delete, nothing happens. So, could not make sense.

I see many tricks based on :before and :after are in use these day. I thought to understand this, so asked.

@Connor: That block is generally used for clearing floats. The presence of the `.` is the exact same reason why I put it as a comment and that too with a `?` instead of as an answer :) — Harry, Oct 05 '13 at 15:26

score 1 · Answer 1 · edited May 23 '17 at 12:11

If you are asking for the piece of code you shared, it clears the floating elements, say for example you have this

~~Demo~~ (Without :after pseudo to self clear parent)

Demo 2 (Using :after with the properties to clear floating elements)

If you are asking specifically about :after than it's just like a virtual element. It just adds content after the element. You also have :before which will add content before instead. The pseudo generated content is inline by default.

This feature is really handy say when you want to add some content before or after the element, now you will say how is this really useful in real world, than consider this as 2 elements which you can just make act like a div by making it a block level like

div.class_name:before, 
div.class_name:after {
   display: block;
}

Will just save you 2 elements in DOM, I would like to share few links where I've used this feature to cut down HTML...

Answer Here - Demo

MDN Reference | Support

You have given many example perhaps to make more sense of :after and :before. Voted up. Need to give more time to understand it as :after :before is something very rarely used thing for me. — Satya Prakash, Oct 05 '13 at 15:36
@SatyaPrakash Thank you, I just answered here few mins back, you can check this out http://stackoverflow.com/a/19197623/1542290, and take it simply as it will create a virtual element, but you need to use `content: "";` for that — Mr. Alien, Oct 05 '13 at 15:39

score 1 · Accepted Answer · answered Oct 05 '13 at 15:13

1

This “clearfix” generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.

Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This has two benefits:

1.It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hidden

2.It ensures visual consistency with IE 6/7 when zoom:1 is applied.

answered Oct 05 '13 at 15:13

Your answer got votes but your answer is as cryptic to me as the code. Reading and reading to make sense. – Satya Prakash Oct 05 '13 at 15:32
@SatyaPrakash as i feel according to his question, i think this is best way to explain him – Oct 05 '13 at 15:34
May be! Finding difficulty in visualizing context "top margin collapse" and then clear the float. I got clear float but where just clear:float does not work on element and where this has saved total amt of code needed, etc. – Satya Prakash Oct 05 '13 at 15:42
I understand :before and :after for inserting content but these hacks are difficult to understand. 1+ though to give me food for mind. :) – Satya Prakash Oct 05 '13 at 15:45
@SatyaPrakash dude, i have to run. i will soon give you feed back as quick as possible. whenever you use float property in any element and will find parent element collapsed, then try to use clearfix class on the end of the floating element. thanks – Oct 05 '13 at 15:54

score 0 · Answer 3 · answered Oct 05 '13 at 15:06

0

:after in conjunction with content can be used to add content after elements. Try this:

span:after {
    content: "world"
}

<span>Hello </span>

http://jsfiddle.net/d3M99/

answered Oct 05 '13 at 15:06

Yuriy Galanter

38,833
15
69
136

score 0 · Answer 4 · answered Oct 05 '13 at 15:07

This code is used for clearing the floats :before and :after can serve many purpose and its really usefull

for example if you want to add $ to the currency

.currency:before{
   content :'$';
}

this will add $ to all the classes currency, so it saves lots of time here is the jsfiddle

Checkout this resouses link

Why this selector:after Piece of CSS Code is Used?

4 Answers4