demo · v131

Editorial drop-cap on a generated pull-quote

An editorial pull-quote: the opening curly quote and the attribution byline are both generated content. With nested pseudo-elements, you can apply ::first-letter rules to those generated strings — restyle the first character of ::before AND ::after without touching the markup.

We tell ourselves stories in order to live. We look for the sermon in the suicide, for the social or moral lesson in the murder of five. We interpret what we see, select the most workable of multiple choices.

the css

.quote::before {
  content: "\201C";              /* generated open-quote glyph */
  font-family: serif; font-size: 4.5rem;
  color: rose;
}

/* NEW in 131: first-letter of the GENERATED content */
.quote::before::first-letter {
  color: blue;
}

.quote::after {
  content: " — " attr(data-author);
}

.quote::after::first-letter {
  font-weight: 700;
  color: black;
}

why this needed a spec

Before 131, ::first-letter only ever matched the first letter of an element's real DOM text. Generated content was opaque to the selector engine. To get a styled drop-cap on a generated pull-quote, authors had to inject a real DOM span or duplicate the glyph in the HTML. Nested pseudo-elements close that gap and unblock several editorial-CMS patterns where the visible text is composed at render time.

see also