Css3 inserts content on the page, and css3 inserts content on the page
A. Insert content using Selector
H2: before {
Content: "prefix ";
}
H2: after {
Content: "suffix ";
}
B. The specified element is not inserted.
H2.sample: before {
Content: none;
}
2.Insert Image
A. Insert an image file before the title
H2: before {
Content: url(anwy.jpg );
}
B. SetAltThe attribute value is displayed as the image title (not available)
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
Div: before {
Content: counter (divCounter );
}
Div {
Counter-increment: divCounter;
}
B. Append text to the project symbol
Div: before {
Content: "section" counter (divCounter ";
}
C. Id style and type
Div: before {
Content: counter (divCounter, upper-alpha )'.';
Color: blue;
Font-size: 16px;
}
D. Number nesting
Div: before {
Content: counter (divCounter, upper-alpha )'.';
Color: blue;
Font-size: 16px;
}
Div {
Counter-increment: divCounter;
Counter-reset: subDivCounter;
}
P: before {
Content: counter (subDivCounter )'.';
Margin-left: 15px;
Font-size: 12px;
}
P {
Counter-increment: subDivCounter;
}
E. Add text nesting characters on both sides of the string
H3: before {
Content: open-quote;
}
H3: after {
Content: close-quote;
}
H3 {
Quotes :"【""]";
}
Disc point | circle | square | decimal number | decimal-leading-zero decimal number | lower-roman lower case Rome text | upper-roman upper case Rome text | lower-greek lower case greek letter | lower-latin lowercase latin | upper-latin upper-case latin | armenian Armenia number | georgian Georgia number | lower-alpha lower-case English letter | upper-alpha upper-case English letter | none | inherit inheritance