Mark Branscum
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;
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;
}
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
ASKER
is so the element is there for future use
The element .... you mean the .container element or the after/pseudo element?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
ASKER
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"><coding>Is my passion</coding></pre>
<p class="animated headShake"><a href="tel:+19185551234">918-555-1234</a> • <a href="mailto:something@gmail.com">something@gmail.com</a></p>
</div>
</section>
ASKER
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?
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.
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.
ASKER
Thanx Julian ...... again top notch ... learn so much from ... it is very much appreciated ... clear concise, and complete as usual.
ASKER
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.
Open in new window
i.e
Open in new window
Working Example for you to seeAfter CSS
Hope this helps