Using lh unit as margins

[6mint]

Per font all values except for the line height are constant. So it would be possible to replace the fixed em values used as negative margins with a calc() using the lh unit.

margin-top: calc(a - 0.5lh);
margin-bottom: calc(b - 0.5lh);

where

a = (0.5 * (-ascent + Math.abs(descent)) + capHeight) / unitsPerEm;
b = (0.5 * (ascent - Math.abs(descent))) / unitsPerEm;

This way the rules inside ::before and ::after would be font-size and line-height independent and would also allow other units like rem for font-sizes.

Here is a codepen demo:
https://codepen.io/2pinch/pen/VYZNGRy

The overall support for the lh-unit is quite good, but can't be considered universally available.
(Alternatively, to widen support, it can be considered to use a custom property for the line height.)