Suppose you have a paragraph or heading whose display property is set, whether by default or explicitly by you, to inline-block.
Then, you create a ::before pseudo-element for it and assign it a line-height different from that of the original DOM element.
The Problem
Inheritance of properties in CSS will kick in, and the line-height of your pseudo element will alter the line-height of the original element as evident in the fiddle below:
The question is, how can you solve this?
Is there a way to give an explicit line-height property to a ::before pseudo-element without it altering the overall line-height of the original element in the DOM?
The Solution
What you need to do is remove the CSS pseudo-element from the flow.
The simplest, most straightforward way to do this is to float the pseudo-element left or right:
The outcome, as you can see in the fiddle’s result above, is a pseudo-element with one line-height and a main element with another.