Box sizing for pseudo elements

index.html

<div class=☃>☃</div>

script.js

// Box sizing for pseudo elements
// by @chrisnager

style.css

/* 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;
}