This is the 24th day of my participation in the August More Text Challenge.

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 used directly as pseudo-elements are numbers, English letters, Chinese characters, $, some operators, and Spaces, which are very easy to ignore

The following attributes apply to ::first-line 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

Try it out for yourself

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:

The instance

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:

The instance

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

Try it out for yourself

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:

The instance

::selection {
  color: red; 
  background: yellow;
}
Copy the code