Thefirstoptionpreservestheverticalrhythmthatcomeswithusingunitlessline-
heights.^9 Thesecondoptionlimitsthesideeffectsofusingfixedline-heightsjust
tothosepseudo-elements.Optionthreeistheworstoftheseoptionsbecausethere’s
ahighlikelihoodthatyou’llcreateasideeffectthatrequiresmoreCSStooverride
it.
Inthiscase,let’sdecreasetheline-heightvalueforp::first-letterto.5(and
rewriteourfilepropertiestousethefontshorthand):
01-selectors/pseudo-el-first-letter-init.html (excerpt)
p::first-letter {
font: bold italic 3em / .5 serif;
color: #3f51b5;
}ThischangeproducestheresultshowninFigure1.13.Noticeherethatwealsohad
toadjustthebottommarginofeachpelementtocompensateforthereducedline-
heightofp::first-letter.
Figure 1.13. Mitigating the effect of ::first-letter on line-height(^9) TheMozillaDeveloperNetworkentryforline-heightexplainswhyunitlessvalues
[https://developer.mozilla.org/en-US/docs/Web/CSS/line-height]arethewaytogo.
Selectors 25