Link to home
Start Free TrialLog in
Avatar of Mark Branscum
Mark BranscumFlag for United States of America

asked on

Best explanation of following code css

The below code ... I am trying to better understand ..... .container::after ..... its purpose ..... then content: "";
then display: block; and clear: both;



.container {
  max-width: 1200px;
  margin: 0 auto;
  color: #ffffff;
  padding: 0 20px;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

Open in new window

Avatar of Allan Nisbet
Allan Nisbet
Flag of United Kingdom of Great Britain and Northern Ireland image

The simple explanation is that

::after - Inserts something after your container element
content: "" - insert nothing
display:block; - display the element of after as a block element
clear:both; - float the after

Open in new window


i.e
.div::after {
  content: "Hello World";
}

would be

<div>
<!-- Rest of stuff inside the div -->
  Hello World
</div>

Open in new window


Working Example for you to seeAfter CSS



Hope this helps
I meant to say the main reason for doing it is so the element is there for future use, such as after a hover or something liek that
Avatar of Mark Branscum

ASKER

is so the element is there for future use

Open in new window


The element .... you mean the .container element or the after/pseudo element?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The pseudo element,

say you wanted to add a content message in there to tell a user something after they hover over a link but you want it to be invisible until they hover.

When i first saw it I thought it was pointless but then saw it in action and was like ah thats quite cool and useful

Hope that Helps
This is a sample of a pseudo  resume ...... don't know if this helps I  was trying to understand the need and what it was ....... I knew or assume I'm correct that clear:both; can be used to keep text from wrapping around an image that is floated left... at least that's my limited understanding .... but in this markup it confused me

 <header>
    <div class="container">
      <p class="logo">John dude</p>
      <nav>
        <ul>
          <li><a href="#top">Top</a></li>
          <li><a href="#samples">Samples</a></li>
          <li><a href="#experience">Experience</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a class="button" href="#">Print</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="top" class="hero">
    <div class="container">
      <div class="pic">
        <img src="img/pagePic.png" alt="picture of dude">
      </div>
      <h1 class="animated zoomInLeft">Front-End Developer</h1>
      <pre class="animated fadeInRightBig">&lt;coding&gt;Is my passion&lt;/coding&gt;</pre>
      <p class="animated headShake"><a href="tel:+19185551234">918-555-1234</a> &bull; <a href="mailto:something@gmail.com">something@gmail.com</a></p>
    </div>
  </section>

Open in new window

Julian reading back over your comment ... it's starting to make sense to me ..... I may be off here but let me give it a shot
Your example of what you used to do ie; <div style="clear:both"></div>
This acted as a buffer ..... keeping the float from enterfering from the next element .... am I close? But now you use css a pseudo element to act as that buffer yes?
Not sure I would use the word buffer but yes. When the browser renders a page it follows the "flow" of the document. Inline elements go next to each other, block elements on a new line (greedy - they take the full width). Floated elements sort of behave like inline elements except that not only inline elements will follow on from a float but block elements as well (unlike normal inline elements where following block elements go on a new line). So you could have a <div> after a float and have that <div> appear to the right of the floated item instead of underneath as would be the case had the floated item been inline.

The <div style="clear:both"></div> inserts an element into the flow that clears the float so that rendering returns to default and the next element gets rendered on a new line flush with the left margin.

The :after - allows you to do the same thing without having to actually code an empty element into your document. It is as though the <div style="clear: both"> is there but you don't actually have to put it there.
Thanx Julian ...... again top notch ... learn so much from ... it is very much appreciated ... clear concise, and complete as usual.
To any searching read on toward the bottom too as more is added but this was exactly what I was looking for, one of the best explanations I have seen. Thanx again Julian .... spot on!!!
You are most welcome Mark, and thank you.