CSS Advanced Tutorial Pseudo Elements

Pseudo elements suck selectors like pseudo classes, using the form selector:pseudoelement { property: value; }. There are four suckers.
First letter and first line
The first-letter pseudo-element is applied to the first letter of the element, and the first-line is the top line of the element. You could, for example, create a paragraph with a bold first line and drop cap, like this:
p:first-letter {
font-size: 3em; float: left;
}
p:first-line {
font-weight: bold;
}
before and after
before and after pseudo-elements and content attributes are used on both sides of the element to change things on both sides of the content without changing the HTML.
The value of the content attribute can be open-quote (open quotation marks), close-quote (closed brackets), no-open-quote (no open brackets), no-close-quote (no closed brackets), any character with quotation marks String or image, use url(imagename).
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
Attention
Sounds good, dunnit? Well, there are so many of them (ugh, sigh) that most users are not able to see the before and after effects because IE is obsessed with them. Lazy...

For more CSS advanced tutorial pseudo-element related articles, please pay attention to the PHP Chinese website (www.php.cn)!