Mainly said: Before,:after elements these two pseudo-class elements how to use, they and:: Before,::after not much difference, the latter is CSS3 new. Create a fake element box, and then add a style or content. And this box is the content style inside. Use this element to have a content style. Take a look at its usage scenario:
1. Add a picture or text
<p id= "text" > Test </p> #text:: before{content: ""; Width:100px;height:100px;background:url ("Xxx.jpg") No-repert Center;} This adds a picture to the test before the content is used to make the box but the box is virtual, so it's called a pseudo-class.
2. Clear floating
#text:: after{content: ""; Display:block; height:0px; Overflow:hidden; Clear:both;}
3. Inserting text
#text:: after{content: "End"; color: "#ccc";} Output Test end. #text:: before{content: "Start"; color: "#666"} Output start test
4. Insert Item number
<ul> <li> Title one </li> <li> title two </li></ul>ul li::before{content: (number) ", This is like a string concatenation, the number can be set different style values, specific Baidu bar.
Uh, well, above.
CSS pseudo-Class