Mixins and :before :after

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.

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