Can you explain how the baselineTrim functions?

[dabrahams]

I think I understand roughly what's going on with most of the calculations, but the margin-top setting on the ::after pseudo-element is a bit of a mystery to me; if I remove it, that never seems to change anything.

Thanks.
Dave

[michaeltaranto]

Best way to look at this is a quick demo.

Using html nodes to replicate the pseudo elements, you can see that without the marginTop on the after the following node is not pulled up to the baseline of the cropped text node.

The display table technique is also being used to prevent margin collapse resulting in unexpected outcomes when using background colours.

Hope that helps

[dabrahams]

That's wonderful, thanks.