CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 250

___________
5 See http://www.w3.org/TR/css3-content/
a[type*="pdf"]::before
{
content: url(doc.png);
margin-right:5px;
}
a[type*="pdf"]::after
{
content: " (" attr(type) ")";
}
Using the content property, the icon is embedded before the anchor element, and
the parentheses and value of the type attribute are inserted after the element. Figure
6-10 shows the result.
Figure 6-10. The ::before and ::after selectors inserting an icon and file type information
around a link
WHAT MAKES A PSEUDOELEMENT?
CSS level 1 (CSS1) defined a selector, :first-letter , which has become
::first-letter in CSS3. As you see in Table 6-10 , a handful of selectors use
the :: prefix, which is syntax that is new in CSS3. This syntax is used to mark these
elements as being part of the pseudoelements group of selectors. The prefix is for
distinguishing them from other types of selectors. Pseudoelements are unique among
the selectors in that they access information that is not specifically marked up by
an element in the HTML of the document. For example, looking at the HTML for
a paragraph of text, there isn't part that is defined as being the first line of text; in-
stead, the first line is determined by how the content gets laid out in the browser. The
::first-line selector can pick out this part of the HTML, however. From its
standpoint, the first line of textual content in an element is inside an ethereal element
that it can style (which is why it's called a pseudoelement ). The same situation arises
when using ::first-letter . It is readily apparent to you which character in a
paragraph is the first letter, but that isn't explicitly marked up in the HTML, so the