.clearfix::after {
clear: both;
}Addtheclearfixclasstoanyelementthatneedstobeclearedafterafloatedele-
ment.
Both::beforeand::afterbehavejustlikeregulardescendantsoftheelementto
whichthey’reattached.Theyinheritallinheritablepropertiesoftheirparent,and
sitwithintheboxcreatedbytheirparent.Buttheyalsointeractwithotherelement
boxesasthoughtheyweretrueelements.Addingdisplay: blockordisplay:
tableto::beforeor::afterworksthesamewayasitdoesforotherelements.
One Pseudo-element per Selector
Currently,onlyonepseudo-elementisallowedperselector.Thismeansthata
selectorsuchasp::first-line::beforeisinvalid.Creating Typographic Effects with ::first-letter
Whilethe::beforeand::afterpseudo-elementsinjectcontent,::first-letter
workswithcontentthatexistsaspartofthedocumentsource.Withit,wecancreate
initialordrop-capitallettereffects,asyoumightseeinamagazineorbooklayout.
Initial and Drop Capitals
Aninitialcapitalisanuppercaseletteratthestartofatextsetinalargerfont
sizethantherestofthebodycopy.Adropcapitalissimilartoaninitialcapital,
butisinsetintothefirstparagraphbyatleasttwolines.ThisCSSsnippetaddsaninitialcapitallettertoeverypelementinourdocument:
p::first-letter {
font-family: serif;
font-weight: bold;
font-size: 3em;Selectors 23