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 Sass Basics Improve Your Workflow with Sass Pass Content Blocks to Mixins

GoldSpec Digital
GoldSpec Digital
4,185 Points

Mixins and :before :after

So i'm a bit confused with this one. Originally the skewed properties applied to the header using the :after element, and they applied to the footer using the :before element.

When we created the mixin, we created the following:

@mixin skewed { position: relative; &::after { content: ''; display: block; width: 100%; height: 50px; position: absolute; transform: skewY(-2deg); @content; } }

This only uses :after... I don't under how we replaced :before with after, and everything still looks the same?

Any help on this would be greatly appreciated - I hope my question makes sense.

2 Answers

Nicholas Pretorius
Nicholas Pretorius
18,671 Points

While not answering your question directly, it helps to first understand what ::before and ::after fundamentally do.

The easiest way to understand the fundamental difference between the two is to use ::before and ::after with the content attribute. Try it and see for yourself:

h1::before {
 content: "Hello";
}

h1::after {
 content: "World";
}

This shows you that the code inserts content before or after an element. Keep this in mind. Further to this, it is important to understand what absolute positioning does.

Back to what is happening in the code in your question: This is kind of a "trick".

  • Essentially, content: ''; is inserting "nothing" after the header (or before in the footer).
  • This "nothing" is then given a height and width, positioned absolutely and then transformed.
  • The absolute positioning is the key here (along with the top or bottom value).

Absolute positioning is what makes ::before or ::after behave the same way in this instance. If you insert "something" on to a page, and then position it absolutely it is positioned the same way regardless of whether you add it before or after the element since it is taken out of the normal flow of positioning.

The parent is positioned relatively, as such, absolute positioning of the child is relative to the parent. In this case, the ::before/::after does not really matter anymore because position absolute (and 100% wide) used in conjunction with a top/bottom value is what dictates where the element appears. Use of ::before/::after is no longer the key and is mostly a semantic choice.

In the context of the header, ::after is used because it makes more sense semantically since the "skew" is "after" the header. And ::before was used on the footer because it appears "before" the footer. Using @content to pass in top or bottom is then what controls whether the skew appears on top or below of the element being "skewed".

I am sure the above might sound horribly confusing. A good exercise to help understand what is happening is to experiment with the following:

  • Set the position attribute to relative instead of absolute. Notice where the "skew" goes.
  • Apply the @mixin directly to the header or footer instead of using ::after/::before.
  • Use bottom (or top) instead of the opposite on footer/header.

In the end, the best way to help understand these things is to first go to the docs to understand the basics and then to experiment by using different values to see what the result is.

Elinor Armsby
Elinor Armsby
13,006 Points

Thank you for that explanation! I too was confused by this!