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 the alt attribute 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:"【""】"; }
disc Point| circlecircle | squaresquare | decimalnumber | decimal-leading-zero decimal number| lower-roman lowercase Roman text| upper-roman uppercase Roman script| lower-greeklower case Greek letter | lower-latinlowercase Latin | upper-latin uppercase 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!