Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 304

:before and :after
The :before and :after pseudo-elements will add the specified content in front of or after the
indicated element selector. So, the following code would add ** to the front and end of the
paragraph element:
p::before {
content: '**';
}
p::after {
content: '**';
}
:irst-line
The :irst-line pseudo-element alters the styles of the first line of a text element. The following
CSS will make the first line of the text inside the paragraph element green and larger:
p::first-line {
color:green;
font-size: x-large;
}
Thought experiment
Using jQuery with pseudo-classes
In this thought experiment, apply what you've learned about this objective. You can
find an answer to this question in the “Answers” section at the end of this chapter.
Consider how you can use jQuery to select elements using pseudo-classes and
pseudo-elements. Using only jQuery, apply CSS styles to the first paragraph of any
group of paragraph elements.
Objective summary
■ Pseudo-elements and pseudo-classes provide an advanced mechanism for searching
HTML elements in a page and applying styles.
■ Using pseudo-elements and pseudo-classes you can change the style of an element
based on user actions.
■ Using pseudo-elements and pseudo-classes you can gain granular control over parts
of the text in a text block.