How to insert content into the page in css3

A．Use selectors to insert content

h2:before{ 　　content:"前缀"; } h2:after{ 　　content:"后缀"; }

B.Specify individual elements not to be inserted

h2.sample:before{ 　　content:none; }

2.Insert images

A．Insert image file before the title

h2:before{ 　　content:url(anwy.jpg); }

B．Display the value of thealtattribute as the title of the image (cannot be used)

img:after{ 　　content:attr(alt); 　　display:block; 　　text-align:center; 　　margin-top:5px; 　　font-size:11px; 　　font-weight:bold; 　　color:black; }

3.Insert number

A．Add consecutive numbers before multiple titles

p:before{ 　　content:counter(pCounter); } p{ 　　counter-increment:pCounter; }

B．Append text to bullets

p:before{ 　　content:"第"counter(pCounter)"段"; }

C．Specify numbering style and type

p:before{ 　　content:counter(pCounter,upper-alpha)'.'; 　　color:blue; 　　font-size:16px; }

D．Number nesting

p:before{ 　　content:counter(pCounter,upper-alpha)'.'; 　　color:blue; 　　font-size:16px; } p{ 　　counter-increment:pCounter; 　　counter-reset:subDivCounter; } p:before{ 　　content:counter(subDivCounter)'.'; 　　margin-left:15px; 　　font-size:12px; } p{ 　　counter-increment:subDivCounter; }

E．Add text nesting symbols on both sides of the string

h3:before{ 　　content: open-quote; } h3:after{ 　　content: close-quote; } h3{ 　　quotes:"【""】"; }

discPoint| circlecircle| squaresquare| decimalnumber| decimal-leading-zerodecimal number| lower-romanlowercase Roman text| upper-romanuppercase Roman script| lower-greeklower case Greek letter| lower-latinlowercase Latin| upper-latinuppercase Latin| armenianArmenia Number| georgianGeorgian number| lower-alphalowercaseEnglish letter| upper-alphauppercaseEnglish letter| none无| inheritinherit

The above is the detailed content of How to insert content into the page in css3. For more information, please follow other related articles on the PHP Chinese website!