CODEWITHSUNDEEP
csswebclient-side
Michael
Michael

Reputation: 42100

What does this CSS rule mean?

I noticed this CSS rule (see below) applied to the "grid" div element. 

.grid:after {
  content: "";
  display: table;
  clear: both;
}

What does it exactly mean and why they need it?

Upvotes: 0

Views: 92

Answers (2)

matewka
matewka

Reputation: 10158

:after is a pseudo-element selector. It defines a pseudo element that will be rendered as the last child of the .grid element. The content property defines the content of this pseudo element.

This particular CSS is so-called clear-fix.

They probably have some elements in the .grid which are all float: left. That causes the .grid to look like empty. All these elements are no block elements so the .grid kinda doesn't see them, which makes it width and height equal to zero.

An old popular way to resolve the problem was to add an empty div as the last element of the .grid

<div class="clr"></div>

with such style

.clr {
    clear: both;
}

Nowadays, since we have such beautiful feature as CSS pseudo-elements we can spare the DOM and simply add those three lines of CSS you mentioned in the question.

:after and :before pseudo elements were introduced as the part of the W3 CSS3 specification. We love them and most of the browsers support them.

Upvotes: 1

Fernker
Fernker

Reputation: 2288

It's a way to clear floats. It's a better way than adding a clear class everywhere that you need it. This way it will clear the floats of the children (probably columns of a framework that are floated).

The :after will add this element at the end of grid (so after all of the children in the HTML). It's pretty cool!

Upvotes: 3

Related Questions