title: Why would the height increase with a smaller font size?
body: <p>I have a block with a certain line-height, where I insert content with the <code>::before</code> pseudo element.</p>
  
  <pre><code>.block::before {
    content:'text here';
  }
  </code></pre>
  
  <p>This works well. However, if I also give the content a smaller font size</p>
  
  <pre><code>.block::before {
    font-size:.6em;
    content:'text here';
  }
  </code></pre>
  
  <p>the block actually becomes higher. Why is that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display:inline-block;
  }
  .lorem, .ipsum, .dolor, .sit {
      line-height:3em; border:1px solid green
  }
  .ipsum:before {
      content:'world!';
  }
  .sit:before {
      font-size:.6em;
      content:'world!';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="lorem"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="ipsum"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;hr style="clear:both"/&gt;
  &lt;div class="container"&gt;
      &lt;div class="dolor"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="sit"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The top row doesn't have font size changes, the bottom row does.</p>
  
  <p>Now I found out that a possible solution is to set the <code>line-height</code> of the pseudo element to <code>0</code>. Or to <code>1em</code>. Or even to <code>normal</code>. So what is going on? Is the <code>line-height</code> set to some weird value by setting the font size to <code>.6em</code>? Why?</p>
  
  <p>PS Although this looks like a duplicate (see the list to the right), none of the answers I've read so far explains why setting <code>line-height:normal</code> solves the issue. There must be something happening that sets the line-height to a greater value implicitly. And that's what I'm trying to find out.</p>