Pseudo-elements - CSS: Cascading Style Sheets 编辑

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax

selector::pseudo-element {
  property: value;
}

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

Index

Pseudo-elements defined by a set of CSS specifications include the following:

• ::after (:after)

• ::backdrop 
• ::before (:before)

• ::cue
• ::cue-region

• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::file-selector-button

• ::grammar-error 

• ::marker 

• ::part() 
• ::placeholder 

• ::selection
• ::slotted()
• ::spelling-error 

Specifications

Browser compatibility

See also

• Pseudo-classes