Ever since I found out about the hidden gem box-sizing:border-box, I’ve used it on most all my projects. While fiddling around with border-box, I learned the * universal selector box-sizing declaration didn’t apply to my pseudo elements.

So, to apply box-sizing:border-box to everthing, use:

/* Base styles
   ------------------------------ */

*,
:before,
:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}



/* ☃
   ------------------------------ */

.☃ {
    margin: 0 auto;
    padding: 8px;
    font-size: 2em;
    text-align: center;
    color: indianred;
    background: lightblue;
}
.☃:before,
.☃:after {
    content: "☃";
    width: 100%;
    border: 8px solid;
    padding: 8px;
    display: block;
    background: seashell;
}

EDIT: I see now that this technique has been mentioned before a few times.

However, for the sake of brevity and saving a couple bytes, my suggestion is writing out :before and :after rather than *:before and *:after shown in the other examples.