CSS Pseudo-elements

Common Pseudo-elements

::before inserts content before element content.

::after inserts content after element content.

::first-letter styles the first letter of text.

::first-line styles the first line of text.

::selection styles user-selected text.

/* Generated content */
.quote::before {
  content: "\201C"; /* Opening quote */
  font-size: 2em;
  color: #999;
}

.quote::after {
  content: "\201D"; /* Closing quote */
}

/* Decorative elements */
.heading::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #4CAF50;
  margin-top: 10px;
}

/* Text styling */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

p::first-line {
  font-variant: small-caps;
}

/* Selection styling */
::selection {
  background: #4CAF50;
  color: white;
}