Pseudo-elements

Pseudo-elements are dynamic elements that don’t exist in the document tree, and when used within selectors these pseudo-elements allow unique parts of the page to be stylized. One important point to note, only one pseudo-element may be used within a selector at a given time.

Textual Pseudo-elements

The first pseudo-elements ever released were the :first-letter and :first-line textual pseudo-elements. The :first-letter pseudo-element will identify the first letter of text within an element, while the :first-line pseudo-element will identify the first line of text within an element.

.alpha:first-letter,
.bravo:first-line {
  color: #ff7b29;
  font-size: 18px;
}

Generated Content Pseudo-elements

The :before and :after generated content pseudo-elements create new inline level pseudo-elements just inside the selected element. Most commonly these pseudo-elements are used in conjunction with the content property to add insignificant information to a page, however that is not always the case. Additional uses of these psuedo-elements may be to add user interface components to the page without having to clutter the document with unsemantic elements.

a:after {
  color: #9799a7;
  content: " (" attr(href) ")";
  font-size: 11px;
}

<a href="http://google.com/">Search the Web</a>
<a href="http://learn.shayhowe.com/">Learn How to Build Websites</a>

Fragment Pseudo-element

The ::selection fragment pseudo-element identifies part of the document that has been selected, or highlighted, by a user’s actions. The selection may then be stylized, however only using the color, background, background-color, and text-shadow properties. It is worth noting, the background-image property is ignore. While the shorthand background property may be used to add a color, any images will be ignored.

note: ::selection pseudo-element must always start with double colons.

::-moz-selection {
    background: #ff7b29;
}
::selection {
  background: #ff7b29;
}

Pseudo-elements Overview