Pseudo-elements and Generated Content

Introduction to Pseudo-elements

In our previous lectures, we explored various ways to select and style HTML elements based on their attributes, states, and relationships. Pseudo-elements take this a step further by allowing us to style parts of elements that don't actually exist in the HTML document tree.

Pseudo-elements create "virtual" elements that can be styled as if they were actual elements in the document. This powerful feature enables sophisticated styling effects without cluttering your HTML with extra markup.

While pseudo-classes (which we covered earlier) select elements based on their states or positions, pseudo-elements select specific parts of elements or generate entirely new content around them.

Pseudo-elements vs. Pseudo-classes

Before diving deeper, let's clarify the distinction between pseudo-elements and pseudo-classes:

Common Pseudo-elements

CSS defines several pseudo-elements, but we'll focus on the most commonly used and widely supported ones.

::before and ::after Pseudo-elements

The ::before and ::after pseudo-elements are the most versatile and frequently used. They create virtual elements as the first and last children of the selected element, respectively.

/* Basic usage with generated content */
.quote::before {
  content: """;  /* Opening quotation mark */
}

.quote::after {
  content: """;  /* Closing quotation mark */
}

/* Creating decorative elements */
.card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: #0066cc;
  transform: rotate(45deg);
}

/* Adding icons with Unicode */
.external-link::after {
  content: " \2197";  /* Unicode for "↗" */
  font-size: 0.8em;
}

/* Using images as content */
.premium-badge::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('star.svg');
  background-size: contain;
  margin-right: 5px;
}

<p class="quote">This paragraph has quotation marks added with pseudo-elements.</p>

<div class="card">
  Element with a decorative corner ribbon
</div>

<a href="#" class="external-link">External link</a>

.element::before {
  content: "";
  display: block;  /* or inline-block, absolute, etc. */
  position: absolute;  /* if parent is positioned */
  /* other positioning properties */
}

::first-line Pseudo-element

The ::first-line pseudo-element selects the first line of text in a block-level element. It's useful for creating typographic effects.

/* Style the first line of a paragraph */
p::first-line {
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Style the first line of an article introduction */
.article-intro::first-line {
  font-size: 1.2em;
  font-style: italic;
}

::first-letter Pseudo-element

The ::first-letter pseudo-element selects the first letter of a block-level element. It's commonly used for creating drop caps and other typographic effects.

/* Basic drop cap */
p::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  float: left;
  padding-right: 8px;
}

/* Fancy drop cap */
.article-intro::first-letter {
  font-size: 3em;
  font-family: 'Georgia', serif;
  line-height: 0.8;
  float: left;
  padding: 4px 8px 0 0;
  color: #900;
}

/* Art deco style initial cap */
.art-deco::first-letter {
  font-size: 2em;
  font-weight: bold;
  border: 2px solid currentColor;
  padding: 2px 10px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: #f0f0f0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

::selection Pseudo-element

The ::selection pseudo-element applies styles to text that has been highlighted (selected) by the user.

/* Style all selected text */
::selection {
  background-color: #4dabf7;
  color: white;
}

/* Style selected text within specific elements */
.important-content::selection {
  background-color: #ffd43b;
  color: #212529;
}

/* Different selection styles for code blocks */
pre::selection, code::selection {
  background-color: #212529;
  color: #ffd43b;
}

function example() {
  // Code blocks might have distinctive selection colors
  console.log("Try selecting this code!");
}

::placeholder Pseudo-element

The ::placeholder pseudo-element selects the placeholder text in an input field or textarea.

/* Style all placeholders */
::placeholder {
  color: #999;
  font-style: italic;
}

/* Style placeholders in specific form fields */
.search-input::placeholder {
  color: #6c757d;
  opacity: 0.7;
}

/* Different placeholder styles for required fields */
input:required::placeholder {
  color: #dc3545;
  font-weight: bold;
}

::-webkit-input-placeholder { /* Chrome, Safari, Edge */
  color: #999;
}
::-moz-placeholder { /* Firefox */
  color: #999;
  opacity: 1; /* Firefox applies opacity by default */
}
:-ms-input-placeholder { /* Internet Explorer */
  color: #999;
}
::placeholder { /* Modern browsers */
  color: #999;
}

Other Pseudo-elements

CSS includes several other pseudo-elements with more specialized uses:

• ::marker - Styles the marker box of list items (bullets, numbers)

  li::marker {
    color: #0066cc;
    font-weight: bold;
  }

• ::file-selector-button - Styles the button part of <input type="file"> elements

  input[type="file"]::file-selector-button {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px 10px;
  }

• ::cue - Styles WebVTT cues in video elements

  video::cue {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-family: sans-serif;
  }

• ::backdrop - Styles the backdrop of an element in fullscreen mode

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
  }

Generated Content with the content Property

The content property, used with ::before and ::after pseudo-elements, is a powerful tool for adding content without modifying the HTML structure.

Text Content

/* Simple text content */
.new::after {
  content: "NEW";
  font-size: 0.8em;
  background-color: #dc3545;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

/* Multiple text strings */
.quote::before {
  content: """ attr(cite);
}

/* Automatically add text based on element attributes */
a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #6c757d;
}

Special Values for the content Property

/* Empty string - creates the pseudo-element without text content */
.divider::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #dee2e6;
  margin: 20px 0;
}

/* URL - include an image */
.download::before {
  content: url('download-icon.svg');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Attribute values */
a[title]::after {
  content: " (" attr(title) ")";
}

/* Counters - for automatic numbering */
body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

/* Quotes - language-appropriate quotation marks */
q {
  quotes: """ """ "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

Using Counter Functions

CSS counters allow you to automatically number elements, creating complex numbering schemes without additional markup.

Practice Exercise

Conclusion

Pseudo-elements and generated content are powerful CSS features that allow you to enhance your web pages without adding extra HTML elements. They enable you to:

• Create sophisticated typographic treatments
• Add decorative elements and visual indicators
• Generate dynamic content based on element attributes
• Build interactive UI components with minimal markup
• Implement automatic numbering and complex styling patterns

Additional Resources