Suppose you have a paragraph or heading whose display property is set, whether by default or explicitly by you, to
Then, you create a
::before pseudo-element for it and assign it a line-height different from that of the original DOM element.
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?
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.