🥇 Dimensionamento da caixa para pseudoelementos

Desde que descobri sobre a <a href=” http://paulirish.com/2012/box-sizing-border-box-ftw/”> joia oculta </a>box-sizing:border-box</code>, I've used it on most all my projects. While fiddling around with border-box</code>, I learned the *</code> universal selector box-sizing</code> declaration didn't apply to my pseudo elements.

Então, para aplicar box-sizing:border-box</code> to <em>everthing</em>, use:

/* Border-box all the things!
   ------------------------------ */

*,
:before,
:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}</code></pre>

Here's an <a href="http://codepen.io/ChrisNager/full/aJlFy">example</a>.

<b>EDIT:</b>
I see now that this technique has been mentioned before <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/#comment-116128">a</a> <a href="http://coderwall.com/p/0qti4g">few</a> <a href="http://css-tricks.com/dont-overthink-it-grids/">times</a>.

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

Related Posts