Difference between & before and after selector

Just in case, I'm going to answer this the other way. When I read the question, I thought you were asking the same thing Moritz answered. But re-reading it, you may be asking what the & means, and how do you know where to put it. Very simply, when nesting selectors, the & is the placeholder for the selector that is being nested. So whether your & goes before or after your selector, depends on how you want the selector to be built.

So if I had very simple sass like this

 p {
    color: red;
    html.csscolumn & {
        margin: 30px;
    }
}

I would end up with this css

p {
    color: red;
}
html.csscolumn p {
    margin: 30px;
}

On the contrary, something like

 p {
    color: red;
    &:hover {
        margin: 30px;
    }
}

would generate

p {
    color: red;
}
p:hover {
    margin: 30px;
}

It's really quite simple when you break it down, & is just a placeholder for what it's nested in.

Hi, &:after and &:before are basically the same thing. The only difference is where the content get's inserted. If you use &:before the content will be placed before the element, if you use &:after it will be placed after your element.