:before and :after{....}

Question

Hello,

Using the :before{.....} or :after{.....} confuse me. In this code below I am supposed to place the icomoon character before the .wrapper, but I how do I know this icomoon is really before the wrapper? I have purposely given the .wrapper pink to try to see if the icomoon was before the wrapper, but I could not tell what was happening:

Here is the style that confuses, me. The odd thing is .wrap:after have the same effect as .wrap:before. How can I prove this icomoon is realy before this wrapper?

.wrap:before{
content:"\e000";
font-family:"icomoon";
font-size:1.9em;
background:#2B9BD4;
color:#FFF;
position:absolute;
top:-31px;
left:45%;
padding:.4em;
border-radius:50%;
z-index:100;
line-height:1;
-webkit-font-smoothing: antialiased;



}

Here is the full code:

<!DOCTYPE html>
<html>
<head>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">

    <script type="text/javascript" src="//use.typekit.net/iwc3rvi.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>







    <title>Web Fonts</title>
    <style>

/* --------------------------
    Margin Reset
----------------------------- */

body, h1, h2, h3, p {
    margin: 0;
} 

/* ---------------------------
    Web Fonts
----------------------------- */
@font-face{
font-family:"DroidSerifBold";
font-weight: bold;
    font-style: normal;
    font-family: 'DroidSerifBold';
    src: url('fonts/DroidSerif-Bold-webfont.eot');
    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
         url('fonts/fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');


}

/* --------------------------
    Icon Fonts
----------------------------- */
@font-face{
font-family:'icomoon';
src:url('icons/icomoon.eot');
    src:url('icons/icomoon.eot?#iefix') format('embedded-opentype'),
        url('icons/icomoon.woff') format('woff'),
        url('icons/icomoon.ttf') format('truetype'),
        url('icons/icomoon.svg#icomoon') format('svg');


}

/* --------------------------
    Page Styles
----------------------------- */

body {
    padding: 4.65em 0;
    border-top: 8px solid #222; 
    background: #f9f9f9;
    color: #333;
    font-size: 1.125em;
    line-height: 1.6;
    font-family:'Open Sans', sans-serif;
}
p {
    margin: 1.6em 0;
    text-align: left;
}
a {
    color: #d24c39;
}
.wrap {
    position: relative;
    margin: 0 auto;
    max-width: 58%;
    background:pink;
}
.wrap:before{
content:"\e000";
font-family:"icomoon";
font-size:1.9em;
background:#2B9BD4;
color:#FFF;
position:absolute;
top:-31px;
left:45%;
padding:.4em;
border-radius:50%;
z-index:100;
line-height:1;
-webkit-font-smoothing: antialiased;



}
.intro {
    margin-top: 3.15em;
}
.title {
    position: relative;
    padding: .82em 0 0 0;
    border-top: 1px solid rgba(51,52,52,.4);
    text-align: center;
    line-height: 1.33;
    font-family: "ff-tisa-web-pro", serif;
    -webkit-font-feature-settings: "liga", "dlig";
}
.author {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.778em;
}
h2 {
    margin: 1.25em 0 0 0;
    color: #2B9BD4;
    font-size: 2em;
    line-height: 1.1;
    letter-spacing:-2px;
}

/* --------------------------
    Media Queries
----------------------------- */

@media screen and (max-width: 599px) {
    body {
        font-size: 1em;
    }
    .wrap {
        max-width: 85%;
    }
    h2 {
        font-size: 1.6em;
    }
}
@media screen and (min-width: 980px) {
    .wrap {
        max-width: 600px;
    }
} 





    </style>
</head>
<body>
    <div class="wrap">
        <h1 id="title" class="title">fffinely craftedll code</h1>
        <p class="author">By: Guil Hernandez</p>
        <p class="intro">
            You've probably already heard of <a href="#">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="#">Sass</a>, <a href="#">LESS</a> and <a href="#">Stylus</a>.
        </p>
        <h2>What's a Preprocessor?</h2>
        <p>
            Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available. 
        </p>
        <p>
            Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that &ldquo;If it's not broken, don't fix it.&rdquo; But lately, many have realized just how powerful preprocessors can make our CSS.
        </p>
        <h2>Why Use One?</h2>
        <p>
            There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create <a href="#">variables</a> from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage&hellip;
        </p>
    </div>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script type="text/javascript">
        $("#title").fitText();
    </script>
</body>
</html>

Answer 1 · 2014-09-17T11:12:32Z

September 17, 2014 11:12am

Hi orange sky,

The :before and :after pseudo elements don't insert content before and after the element that it's applied to but rather the content is inserted within the element. You can think of :before as matching a virtual first child of the element it's applied to and :after matches a virtual last child.

If you have the following html:

<p>This is a paragraph</p>

and css:

p:before {
  content: 'Generated with :before ';
}

p:after {
  content: ' Generated with :after';
}

You can think of the html as being this:

<!-- Don't test, this is not real html -->
<p><before>Generated with :before </before>This is a paragraph<after> Generated with :after</after></p>

So the fake before element is a first-child of the paragraph and the fake after element is a last-child of the paragraph.

This codepen demo will hopefully illustrate this: http://codepen.io/anon/pen/hecaD

Notice that the paragraph has a yellow background and that the generated content also has a yellow background because it is inserted within the paragraph element and not before and after it.

So this is where the content gets inserted before any styling is applied like absolute positioning. With positioning you can then move them around to where ever you want.

To hopefully answer your question, the icon font is inserted before the <h1> but then with absolute positioning it can be moved to another location on the rendered page.

Answer 2 · 2014-09-17T10:28:28Z

September 17, 2014 10:28am

The odd thing is .wrap:after have the same effect as .wrap:before. How can I prove this icomoon is realy before this wrapper?

The :before and :after pseudo elements do exactly what they say they do, the reason you're seeing the same result is because you have an absolute position set on it, if you remove that the result will change and you will see the icon appear before and after the content inside the element.

Below are some links with a ton of information about what pseudo elements are, how they work and real world examples.

EDIT: Meant content inside the element not just element.

Answer 3 · 2014-09-17T10:39:47Z

September 17, 2014 10:39am

One important thing to note is that, :before and :after don't place their content before or after the element itself, they place their content before or after the content of the element. I put this CodePen together to try and demonstrate how they work: http://codepen.io/anon/pen/nlbzq In your example though, you give your :before element an absolute position. Absolute positions take the element out of your page flow and position it with respect to its first positioned parent. For example, if your .wrap element wasn't specifically given a position (i.e. relative or absolute), your :before element would be positioned based on the first parent element that had its position set, or if there isn't a positioned parent, with respect to the body. With this type of positioning, the :before element could be positioned anywhere on the page. It sounds a little confusing, but if you experiment with it a bit, I think you will find it isn't too tough.

Answer 4 · 2014-09-20T12:13:38Z

September 20, 2014 12:13pm

Hello all! I am surprised that this post went through; It kept failing on my end while I was trying to post it, anyway I am happy it did without my knowlege. You've given me all great answers. Thanks all!

Hello Jason, is there a way to verify that the generated contents were inserted into the elements. i have checked my webconsole and they dont appear as children of the contained element.

Sorry for the delay in response. Big thanks to all!

Answer 5 · 2014-09-23T06:32:01Z

September 23, 2014 6:32am

Thank you Chris!!!

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

:before and :after{....}

5 Answers

Jason Anello

Jason Anello

Chris Shaw

Chris Shaw

Aaron Graham

Aaron Graham

orange sky

orange sky

Chris Shaw

Chris Shaw

Jason Anello

Jason Anello

orange sky

orange sky