This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

A pseudo-element is a keyword appended to the end of a selector that allows you to style specific parts of the selected element. The ::first-line pseudo-element in the following example changes the style of the first line of a paragraph.

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

What is a pseudo-element?

CSS pseudo-elements are used to set the style of the specified part of an element.

For example, it can be used for:

  • Sets the style of the first letter and first line of the element
  • Inserts content before or after the content of an element

grammar

Syntax for pseudo-elements:

selector::pseudo-element {
  property: value;
}
Copy the code

: : first – line pseudo elements

::first-line pseudo-elements are used to add special styles to the first line of text.

The following examples are all

Add style to the first line of the element:

The instance

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
Copy the code

Note :: :first-line pseudo-elements can only be applied to block-level elements. In the CSS World book ::first-letter pseudo-elements work only if: – First, the display value of the element must be block, inline-block, list-item, tablecell, or table-caption. All other display values are useless. These include display:table and display:flex — normally the characters that can be directly used as pseudo-elements are numbers, English letters, Chinese characters, $, some operators, and very easily ignored Spaces. The following attributes apply to pseudo-elements:

  • Font properties
  • Color attribute
  • Background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Note the double colon notation – ::first-line versus :first-line

In CSS3, the double colon replaces the single colon notation for pseudo-elements. This is the W3C’s attempt to distinguish pseudo-classes from pseudo-elements.

In BOTH CSS2 and CSS1, the single colon syntax is used for pseudo-classes and pseudo-elements.

For backward compatibility, CSS2 and CSS1 pseudo-elements accept a single colon syntax.

: : first – letter pseudo elements

The ::first-letter pseudo-element is used to add a special style to the first letter of text.

The following example sets all

The format of the first letter of the element text:

The instance

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
Copy the code

Note :: :first-letter pseudo-elements only apply to block-level elements.

The following attributes apply to ::first-letter pseudo-element:

  • Font properties
  • Color attribute
  • Background properties
  • Margin property
  • Inside margin property
  • Border attribute
  • text-decoration
  • Vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

Pseudo elements and CSS classes

Pseudo-elements can be used with CSS classes:

The instance

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}
Copy the code

The above example will display the first letter of the class=”intro” paragraph in red and larger font.

Multiple pseudo-elements

You can also combine several pseudo-elements.

In the following example, the first letter of the paragraph will be red and the font size will be XX-Large. The rest of the first line will be blue and will use small capital letters. The rest of the paragraph will be the default font size and color:

The instance

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
​
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
Copy the code

CSS – ::before pseudo-element

The ::before pseudo-element can be used to insert something before the element content.

The following examples are in each

Insert an image before the contents of the element:

h1::before {
  content: url(smiley.gif);
}
Copy the code

CSS – ::after pseudo-element

::after pseudo-elements can be used to insert some content after the element content. The following examples are in each

Insert an image after the contents of the element:

h1::after {
  content: url(smiley.gif);
}
Copy the code

CSS – :: Selection pseudo-elements

:: Selection Pseudo-elements match parts of the element selected by the user.

The following CSS properties can be applied to :: Selection:

  • color
  • background
  • cursor
  • outline

The following example makes the selected text appear red on a yellow background:

::selection {
  color: red; 
  background: yellow;
}
Copy the code
  • ::after (:after)
  • ::backdrop 
  • ::before (:before)
  • ::cue (:cue)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • ::grammar-error 
  • ::marker 
  • ::placeholder 
  • ::selection
  • ::slotted()
  • ::spelling-error 
Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85). :pseudo-element ::pseudo-element