Line Height of ::before Pseudo-Elements in CSS

How to set a different line-height for your ::before pseudo-element without altering that of the original element.

Published Categorized as CSS, Web Dev

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.

Leave a comment

Your email address will not be published.