CSS Master
::before insertsadditionalgeneratedcontentbeforethecontentofan element ::after insertsadditionalgeneratedcontentafterthecontento ...
color: #c00; font-size: .8em; } RequiredformfieldsusetherequiredHTMLproperty.Sincethatinformationis alreadyavailabletotheDOM,usi ...
.helptext::before { content: '( '; } .helptext::after { content: ')'; } TheresultisshowninFigure1.11. Figure 1.11. Using ::befor ...
.clearfix::after { clear: both; } Addtheclearfixclasstoanyelementthatneedstobeclearedafterafloatedele- ment. Both::beforeand::af ...
font-style: italic; color: #3f51b5; } TheresultcanbeviewedinFigure1.12. Figure 1.12. Creating initial caps with the ::first-lett ...
Thefirstoptionpreservestheverticalrhythmthatcomeswithusingunitlessline- heights.^9 Thesecondoptionlimitsthesideeffectsofusingfix ...
CreatingadropcapitalrequiresafewmorelinesofCSS.Unlikeaninitialcapital, theadjacenttexttothedropcapitalletterwrapsaroundit.Thisme ...
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. ➥” Fusce odio leo, sollicitudin vel matti ...
Figure 1.16. ::first-letter only affects the opening quotation mark in Firefox 40 InChrome,Opera,andYandex,neithertheopeningquot ...
Figure 1.17. Chrome ignores the opening quotation mark and first letter when using q InternetExplorer,however,appliesfirst-lette ...
Figure 1.18. Internet Explorer includes punctuation in first-letter styles AccordingtotheCSSPseudo-elementsModuleLevel 4 specifi ...
_ (underscore) (plussign) ` (backtick) ~ (tilde) (greaterthansign) < (lessthansign) Thisistruewhetherthefirstcharacteriss ...
Figure 1.19. Using the ::first-line pseudo-element Itispossibletoforcetheendofafirstlinebyusingabrorhrelement,asshown inFigure1. ...
Figure 1.20. Forcing the end of a line with a br element Similarly,usinganon-breakingspace( )topreventaline-breakbetween wo ...
Figure 1.21. Generated content becomes part of the first line Ifthegeneratedtextislongenough,itwillfilltheentirefirstline.Howeve ...
Figure 1.22. Adding display: block to content added with ::before means that styles defined for p::first-line will affect that c ...
Figure 1.23. An example of a highlight set using ::selection NoteveryCSSpropertycanbeusedwith::selection.Asoutlinedinthespecific ...
01-selectors/pseudo-el-selection.html (excerpt) ::selection { background: #9f0; color: #600; } ThisCSSaddsalimegreenbackgroundto ...
The::spelling-errorand::grammar-errorpseudo-classesarealsodefinedby thePseudo-ElementsModule.Whenimplemented,thesepseudo-classes ...
Figure 1.25. A comments section as you might find on a blog Eachcommentintheaforementionedcodehasafragmentidentifier,whichmeans ...
«
1
2
3
4
5
6
7
8
9
10
»
Free download pdf
