Box-sizing and Pseudo Elements

From Twitter conversation between @chriscoyier and @garazi [CSS Tip: the *-selector does not affect pseudo elements (:after, :before).]

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Box-sizing and Pseudo Elements</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="box"></div>
<div class="box border"></div>
<div class="box pseudo"></div>
<div class="box pseudo-border"></div>
<div class="explain">
  <p>The "*" selector is being used to set the box-sizing property for all elements to "border-box", ie, border and padding values will not "add" to the width of the element. All boxes are 100px wide.</p>
  <p> The third box's pseudo element is set to 50px and, as expected, is half the size of its parent.</p>
  <p> The fourth box has a 50px wide pseudo element with a border. As you can see, the box-sizing attribute is ignored and the border is added to the outside of the box.</p>
</div>
‚Äč
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
    -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
box-sizing: border-box;    
}
.box {
    width: 100px;
    height: 100px;
    background-color: gray;
    margin: 10px;
    float: left;
    position: relative;
}
.border {
    border: 10px solid red;
}
.pseudo:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: yellow;
}
.pseudo-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    border: 20px solid blue;
}
.explain {
    margin-left: 10px;
    width: 460px;
    border: 2px solid black;
    padding: 20px;
    clear: both;
    line-height: 120%;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Box-sizing and Pseudo Elements ) is write by Michel Marrache, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Michel Marrache