How does css3 insert content into a page
This article mainly explains the "css3 how to insert content in the page", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css3 how to insert content in the page" bar!
A. use a selector to insert content
H3:before {
Content: "prefix"
}
H3:after {
Content: "suffix"
}
B. specify that individual elements are not inserted
H3.sample:before {
Content:none
}
two。 Insert Ima
A. insert an image file before the title
H3:before {
Content:url (anwy.jpg)
}
B. display the value of the alt attribute as the title of the image (not needed)
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 numbering before multiple headings
Div:before {
Content:counter (divCounter)
}
Div {
Counter-increment:divCounter
}
B. append text to bullets
Div:before {
Content: "paragraph" counter (divCounter) "
}
C. specify numbering style, category
Div:before {
Content:counter (divCounter,upper-alpha)'.
Color:blue
Font-size:16px
}
D. numbering 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 nested symbols on both sides of the string
H4:before {
Content: open-quote
}
H4:after {
Content: close-quote
}
H4 {
Quotes: "["] "
}
Disc point | circle circle | square square | decimal number | decimal-leading-zero decimal number | lower-roman lowercase Roman | upper-roman uppercase Roman | lower-greek lowercase Greek letter | lower-latin lowercase Latin | upper-latin uppercase Latin | armenian Armenian numeral | georgian Georgia numeral | lower-alpha lowercase letter | upper-alpha uppercase letter | none none | inherit inheritance
Thank you for your reading, the above is the content of "css3 how to insert content in the page", after the study of this article, I believe you have a deeper understanding of how css3 inserts content in the page, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
