::before and ::after

The ::before and ::after pseudo-elements are used to insert new content into an existing HTML element using only CSS. The ::before creates new pseudo-element as the first child of the selected element, while the ::after creates a new pseudo-element as the last child of the selected element.

The content property is required in order to add the ::before or ::after pseudo-elements.

NOTE

The ::before and ::after pseudo-elements do NOT work with replaced elements or <br> tags.

blockquote p::before,
blockquote p::after {
  position: absolute;
  top: -15px;
  color: #999;
  font-family: georgia;
  font-size: 8rem;
}

blockquote p::before {
  content: "\201C"; /* left quote */
  left: 0;
}

blockquote p::after {
  content: "\201D"; /* right quote */
  right: 0;
}

This YouTube video was created by Steve Griffith.