CSS Master

::before insertsadditionalgeneratedcontentbeforethecontentofan

element

::after insertsadditionalgeneratedcontentafterthecontentofan

element

::first–letter selectsthefirstletterofanelement

::first–line selectsthefirstlineofanelement

::selection stylestextselectedbythecursor

Ofthese,::first–letter,::first–line,and::selectionaffectcontentthat’s

partofthedocumentsource.The::beforeand::afterpseudo-elements,onthe

otherhand,injectcontentintoadocumentwithoutitexistinginthedocument

source.Let’slookateachofthesepseudo-elementsmoreclosely.

Single-colon Syntax

Youmaycomeacrosssingle-colonversionsof::first–letter,::first–line,

::before,and::afterinoldCSS.Thesepseudo-elementsweredefinedin

CSS2withasingle:.ThoughInternetExplorer 8 requiressingle-colonsyntax,

mostotherbrowserssupportbothversions.Itisrecommededtousethedouble-

colonsyntax.

::before and ::after

Mostpseudo-elementsallowustoselectcontentthat’salreadypartofthedocument

source—inotherwords,theHTMLyouauthored—butnotspecifiedbythelanguage.

With::beforeand::after,however,mattersworkdifferently.Thesepseudo-

elementsaddgeneratedcontenttothedocumenttree.Thiscontentdoesnotexist

intheHTMLsource,butitisavailablevisually.

Whywouldyouwanttousegeneratedcontent?Youmight,forexample,wantto

indicatewhichformfieldsarerequiredbyaddingcontentafteritslabel:

/* Apply to the label element associated with a required field */

.required::after {

content: ' (Required) ';

20 CSS Master