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

Figure 6-9. The ::first-letter and ::first-line selectors applying styles to a para-
graph to create a "drop cap" first letter and bold first line
An effect like that shown in Figure 6-9 could be created by applying the following
CSS to a paragraph element ( p ) filled with text:
p::first-line {
font-weight:bold;
}
p::first-letter {
margin-top:-0.2em;
float:left;
font-size:4em;
margin-right:0.1em;
}
The next two selectors in this group, ::before and ::after , are for generating
and inserting content before and after an element. The precise behavior of how this is
done is described in the CSS3 Generated and Replaced Content Module, 5 but in brief,
images or text may be the inserted around an element. Using CSS to insert text into a
page is something that many frown upon, since it is seen as using CSS for something
that should be done in HTML. If you do use these pseudoelements, bear in mind that for
accessibility reasons the content needs to make sense even if the style sheet is disabled,
so any inserted content needs to be frivolous. That being said, let's move on to how you
would use these selectors.
Both selectors would generally be used with the CSS content property, which is
used to specify the actual content to insert. The content property can take quoted text,
url() and attr() notation syntax, and more. The url() notation syntax takes an
image file path between its parentheses, like url("images/pic.jpg") . The at-
tr() notation syntax takes an attribute name that is found on the element between its
parantheses, which will be replaced with the attribute's value. For example, a link to
download a PDF document could be created with the following:
<a href="presentation.pdf" type="application/pdf">Download
the presentation</a>
A selector could then be created to pick out anchor elements on the page that have
a type attribute set to the MIME type application/pdf (we'll use a wildcard at-
tribute selector so we don't have to type the whole MIME type). On those elements, the
pseudoelements selectors would generate an icon (by linking to an external image) be-
fore the link and some text after it that says it's a PDF. Here's an example: