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