Why would the height increase with a smaller font size?

Question

I have a block with a certain line-height, where I insert content with the ::before pseudo element.

.block::before {
  content:\'text here\';
}
         


        

Answer 1

The font property on .sit:before is affecting this, the content property of css follows the current elements' css properties very stricly,

Its because of this that you can be able to manipulate the value of the content property within the same style that the content property is created

e.g

sit {
  color: green;
}
sit:before{
  content: "text-here";
  color: red;
} 

this would emphasize the color to be red.