CSS Master

font-style: italic;

color: #3f51b5;

}

TheresultcanbeviewedinFigure1.12.

Figure 1.12. Creating initial caps with the ::first-letter pseudo-element

Asyoumayhavenoticedfromthisscreenshot,::first–letterwillaffecttheline-

heightofthefirstlineifyou’vesetaunitlessline-heightfortheelement.Inthis

case,eachpelementinheritsaline-heightvalueof1.5fromthebodyelement.

Therearethreewaystomitigatethis:

1.Decreasethevalueofline-heightforthe::first–letterpseudo-element.A

valueof.5seemstoworkmostofthetime.

2.Setaline-heightwithunitsonthe::first–letterpseudo-element.

3.Setaline-heightwithunitsoneitherthebodyorthe::first–letter parent.

24 CSS Master