CSS : why do I need after Pseudo and content: "" in this case

Question

I was following this tutorial on http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_cols and confused why I need after pseudo and content: "" in this case:

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
    box-sizing: border-box;
    }
    .header {
    border: 1px solid red;
    padding: 15px;
    }
    .row::after {
    content: "";
    clear: both;
    display: block;
    }
    [class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
    }
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    </style>
    </head>
    <body>

    <div class="header">
    <h1>Chania</h1>
    </div>

    <div class="row">

    <div class="col-3">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
    </div>

    <div class="col-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>

    </div>
    </body>
    </html>

I searched on the internet and I have not found any idea

Thanks in advance

https://www.sitepoint.com/understanding-css-content-property/ https://developer.mozilla.org/en-US/docs/Web/CSS/content — prasanth, Oct 23 '16 at 02:53
This is called a clearfix You can see details here https://css-tricks.com/snippets/css/clear-fix/ — vals, Oct 23 '16 at 09:04
ok,i know,but my question is what the effects that it did in that example — phoenix, Oct 23 '16 at 13:53

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

This is a clear fix for floats

.maincontainer{
border:1px solid green;  
}
.maincontainer div{
  float:left;
  border:1px solid green;
  margin:20px;
 }

<div class="maincontainer">
  
  <div id="cell1">cell1</div>
  <div id="cell2">cell2</div>
  <div id="cell3">cell3</div>
  </div>

Check the above snippet

all three divs inside the maincontainer are floated to left.Once they are floated to left, they are taken away from the parent layout,so that's the reason maincontainer's border is not showing up properly

To fix this,you need to apply clearfix

.maincontainer{
 border:1px solid green 
}

.maincontainer div{
float:left;
  border:1px solid red;
  margin:20px;
}


.clearfix::after{
 content:"";
  display:block;
  visibility:hidden;
  clear:both;
}

<div class="maincontainer clearfix">
  
  <div>
    cell1</div>
  
  <div>
    cell2</div>
  <div>
    cell3</div>
  </div>

Here clearfix, is trying to insert a dummy element after div(maincontainer) is rendered, with an empty content and clearing the float on it , this would fix the border issue of the parent element

This reference would help you

What does the CSS rule clear: both do?

Hope this helps

consider accepting the answer if it is of any help to u – Geeky Oct 25 '16 at 22:26 — Geeky, Oct 25 '16 at 22:26

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

As stated in the comments before me, the pseudo element acts as a clearfix. Normally, you would need to add an element with clear: both on it to clear the floats from the columns, but pseudo elements allow us to do so without any extra markup.

Now the reason for the content: "" part is that pseudo elements require content to be inserted in order to be rendered at all.

edited May 23 '17 at 12:16

Community

1
1

answered Oct 24 '16 at 20:55

ppajer

3,045
1
15
22

CSS : why do I need after Pseudo and content: "" in this case

2 Answers2