Box-sizing and Pseudo Elements

In this example below you will see how to do a Box-sizing and Pseudo Elements with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by michelmarrache, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright michelmarrache ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/michelmarrache/box-sizing-and-pseudo-elements-AacJd */
* {
    -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%;
}

Comments