Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Web Typography Web Fonts

:before and :after{....}

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>

5 Answers

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.

Chris Shaw
Chris Shaw
26,650 Points

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.

Aaron Graham
Aaron Graham
18,033 Points

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.

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!

Chris Shaw
Chris Shaw
26,650 Points

Currently Chrome is the only browser that displays pseudo elements in the developer tools within the DOM tree, the most simple way however of debugging pseudo elements is by setting a background colour on them with a set width and height, if it doesn't appear then that generally means you haven't set the content property.

Hi Chris,

Thanks, I didn't know that.

orange sky,

They don't show up in firebug or firefox's own dev tools. Not sure if there are plans to put them in or not.

Thank you Chris!!!