Jump to main content
Menu

Pseudo-Elements

::first-letter and ::first-line Pseudo-Elements

  • These pseudo-elements are associated with CSS selectors and style a specific character or line in the content.
    • ::first-letter styles the first letter in that selector's content.
    • ::first-line styles the first line of content in that selector; layout and browser width will determine where that first line ends.
  • Both come from the print world (think of books that have special typography for the first letter or first line in a chapter) and were in the first version of CSS, which incorporated a number of print media considerations.
  • These can only be applied to block-level elements (or elements displayed as block, inline-block, table-caption or table-cell).
  • If you see these specified as :first-letter and :first-line (with one colon rather than two colons), that is the original syntax from CSS1. CSS3 changed to the double-colon syntax. Browsers support both versions.
Pseudo-Element Usage and Effect Properties Accepted
::first-letter or :first-letter Styles the first letter in the indicated selector.
  • background-related properties
  • border-related properties
  • color
  • clear
  • float
  • font-related properties
  • line-height
  • margin properties
  • padding properties
  • text-decoration
  • text-transform
  • vertical-align (if not floated)
::first-line or :first-line Styles the first line of content in the indicated selector.
  • background-related properties
  • color
  • clear
  • font-related properties
  • letter-spacing
  • line-height
  • text-decoration
  • text-transform
  • vertical-align
  • word-spacing

::first-letter and ::first-line Example

See the Pen first-letter and first-line by Jason Withrow (@jwithrow) on CodePen.

::selection Pseudo-Element

  • This pseudo-element allows you to control background colors and text colors for text that a user highlights by clicking and dragging across it.
  • To see this in effect click and drag across the text in the example.

::selection Example

See the Pen selection Pseudo-Element by Jason Withrow (@jwithrow) on CodePen.

:root Pseudo-Element

  • The :root pseudo-element refers to the root element in the page, which is the element that contains all other elements.
  • In an HTML document the root element is <html>
  • In an XML document, in which you have defined all of your own data tags, the root element would be something else entirely. This allows you to select that root element for styling without having to know the tag name.

:root Example

See the Pen root Pseudo-Element by Jason Withrow (@jwithrow) on CodePen.

::placeholder Pseudo-Element

  • The ::placeholder pseudo-element allows placeholder text in inputs and textareas to be restyled.
  • There are limits to the CSS properties that can be styled; the list of supported properties is the same as ::first-line.
  • Most of the time the change is to the color property, so that the placeholder text matches a website's color scheme or needs to stand out more than the browser default.

:placeholder Example

See the Pen placeholder Pseudo-Element by Jason Withrow (@jwithrow) on CodePen.