Styling Parts of Elements

Pseudo-elements allow you to style specific parts of an element or insert content.

They use double colons (::) to distinguish them from pseudo-classes.

/* Insert Content */
.quote::before {
  content: '"';
  font-size: 2em;
  color: #d1039e;
}

.quote::after {
  content: '"';
  font-size: 2em;
}

/* Style First Letter */
p::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
}

/* Style First Line */
p::first-line {
  font-weight: bold;
  color: #d1039e;
}

/* Selection */
::selection {
  background: #d1039e;
  color: white;
}

/* Placeholder */
input::placeholder {
  color: #999;
  font-style: italic;
}

• ::before - Insert content before element
• ::after - Insert content after element
• ::first-letter - First letter of element
• ::first-line - First line of element
• ::selection - Selected text styling
• ::placeholder - Placeholder text in inputs
• content property - Required for ::before/::after

<p class="drop-cap">This paragraph has a large drop cap at the beginning. Pseudo-elements allow us to style just the first letter differently without adding extra HTML.</p>

<blockquote class="fancy-quote">This is a fancy quote with decorative quotation marks added using pseudo-elements.</blockquote>

<div class="badge">New</div>