Pseudo-elements can be used to style specific portions of an element. (They are also called "selectors".) A common example would be adding an indentation to the first line of every paragraph element, without having to manually add HTML spaces to each element.

Pseudo-elements are attached to a selector with a full colon, and accept common styling properties such as color, font and background.

:first-letter

This pseudo-element affects the first character of the element (selector, class or id) that it is applied to. It accepts the following properties:

background
border
clear
color
float
font
line-height
margin
padding
text-decoration
text-transform
word-spacing

p.fls:first-letter {
  font-size: 20px;
  padding-left: 15px;
}

The first letter of this paragraph, which happens to be a "T", is styled differently than the rest of the paragraph using a class called "fls" to which the :first-letter pseudo-element is applied with the properties shown in the example above

:first-line

This pseudo-element affects the first line of the element (selector, class or id) that it is applied to. It accepts the following properties:

background
clear
color
font
letter-spacing
line-height
text-decoration
text-transform
vertical-align
word-spacing

p.flis:first-line {
  color: #658C00;
  text-decoration: underline;
}

The first line of this paragraph is styled differently than the rest of the paragraph using a class called "flis" to which the :first-line pseudo-element is applied with the properties shown in the example above

:before & :after

These pseudo-elements can be used to add content before and/or after each element they are applied to. The "content" property should be used to specify the content to be inserted. That content can also be styled using other properties.

p.quote:before {
  content: url(quote-before.gif);
}

p.quote:after {
  content: url(quote-after.gif);
}

Applied, the above example might look something like this:

Keep smiling; it makes people wonder what you're up to.