CSS Master

color: #c00;

font-size: .8em;

}

RequiredformfieldsusetherequiredHTMLproperty.Sincethatinformationis
alreadyavailabletotheDOM,using::beforeor::aftertoaddhelpertextis
supplemental.Itisn’tcriticalcontent,soit’sokaythatit’snotpartofthedocument
source.

Generated Content and Accessibility

Somescreen-readerandbrowsercombinationsrecognizeandreadgenerated

content,butmostdonot.Avoidrelyingoncontentgeneratedusing::beforeor

::afterbeingavailabletoassistivetechnologyusers.Moreonthisisavailable

inLeonieWatson’spiece“AccessibilitysupportforCSSgeneratedcontent.”^7

Anotherusecasefor::beforeor::afterisaddingaprefixorsuffixtocontent.
Perhapstheaforementionedformincludeshelpertext,asshownhere:

<form method="post" action="/save">

<fieldset>

<legend>Change Your Password</legend>

<p>

<label for="password">Enter a new password</label>

<input type="password" id="password" name="password">

</p>

<p>

<label for="password2">Retype your password</label>

<input type="password" id="password2" name="password2">

</p>

<p class="helptext">Longer passwords are stronger.</p>

<p><button type="submit">Save changes</button></p>

</fieldset>

</form>

Let’sencloseourhelpertextinparenthesesusing::beforeand::after:

(^7) http://tink.uk/accessibility-support-for-css-generated-content/
Selectors 21