_ (underscore)
- (plussign)
` (backtick)
~ (tilde)
(greaterthansign)
< (lessthansign)
Thisistruewhetherthefirstcharacterissetusing::beforeandthecontent
property,orincludedinthedocumentsource.Thereisnofixforthis.You’llneed
toavoidusingthesecharactersasthefirstcharacterifyou’realsousing::first-
letter.
Bugs in Blink-based Browsers
SomeversionsofBlink-basedbrowserswillnotapply::first–letterrulesif
theparentelementhasadisplayvalueofinlineortable.Thisbugexistsin
Chrome42,Opera29,andYandex15.It’sfixedinChrome44,however,which
shouldbereleasedbythetimethisbookreachesyourhands.Ifyouneedtowork
aroundthisbug,theeasiestfixistoadddisplay: inline-block,display:
block,ordisplay: table-celltotheparentelement.Creating Typographic Effects with ::first-line
The::first-linepseudo-classworkssimilarlyto::first-letter,butaffectsthe
entirefirstlineofanelement.Wecould,forexample,makethefirstlineofevery
paragraphelementbealargertextsizeanddifferentcolorthantherestofeach
paragraph:
01-selectors/pseudo-el-first-line.html (excerpt)
p::first-line {
font: bold 1.5em serif;
font-style: italic;
color: #673ab7;
}YoucanseetheresultinFigure1.19.Noticethatthefirstlineofeachparagraphis
affected,ratherthanthefirstsentence.Howmanycharactersfitonthisfirstlineis
determinedbyfontsizeandelementwidth.
Selectors 31