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

The two pseudo-elements that we often use in real work are ::before and ::after.

In fact, the original ::first-letter element is a pseudo-element that can be found in older documents/news pages. The first line of text is two lines or more large.

Let’s take a look at pseudo-elements in CSS.

0. Let’s start with the original float clearing method:

One of the most common and recommended methods for clearing floats (although they are now being used less often) is to use ::aftter, which represents the most recent element after an element,

Add a.clearfix class to the container of floating elements, and then add a ::after pseudo-element implementation adds an invisible Block element to the end of the element and styles it as follows to clear the float.

(Key style: Clear :both)

.clearfix::after {
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
Copy the code

1. What are pseudo-elements?

1.1 define

A pseudo-element is called a pseudo-element. As the name implies, it is not a real element, but a fake element, used with CSS Settings and visible to the client user: its content is displayed by setting the property Content: ‘What to display’

Pseudo-elements in CSS are used to set the style of the specified part of an element. (Before and after/at the beginning/selected). Default is inline element. If you want to set the width and height, you need to set it to block element: display: block

The role of 1.2:

Pseudo-elements can be used to:

  1. Sets the style of the first letter and first line of the element
  2. Sets the content inserted before or after the content of the element
  3. Set the style of the selected element: for example, the background color of the commonly used selected text

2. Syntax for using pseudo-elements:

/* Selector :: pseudo-element {style attribute} */
selector::pseudo-element {
  property: value;
}
Copy the code

3. Classification of pseudo-elements in CSS:

The most common ones are ::before and :after,

List of all 5 CSS pseudo-elements:

# Pseudo elements The sample Effect Example Description
1 ::before h1::before At the end of each<h1>Element before inserting content
2 ::after h1::after At the end of each<h1>Insert content after the element
3 ::first-letter article::first-letter Select each<article>Element first letter
4 ::first-line article::first-line Select each<article>Element first line
5 ::selection div::selection Select a user-selected part of an element (usually text)

Literally, insert before and after elements in the above, but there’s a little bit of a problem with before and after,

This is not intuitively understood: the injected content will be inserted before or after the child elements of the target element, but it will be inserted “before” or “after” everything under the target element.

3.1 CSS ::beforePseudo elements

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

The following example inserts a background image before the content of each

element:

In the example, the picture isThe nuggets logo

Simply set up an image:

h1::before {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
Copy the code

With background Settings, there are more properties to set:

You can also set the image’s position: position, which is not listed here:

h1::before {
  content: ' ';
  display: block;
  width: 32px;
  height: 32px;
  background-size: 100% 100%;
  opacity: 0.36;
  background-repeat: no-repeat;
  background: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
Copy the code

3.2 CSS ::afterPseudo elements

::after pseudo-elements can be used to insert some content after the element content.

The following example inserts an image after the content of each

element:

Example: Same with ::before

h1::after {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
Copy the code

3.3 ::first-letterPseudo elements

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

The following example sets the first letter format of the text of all

elements:

Example:

p::first-letter {
  color: #b45dea;
  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 element and CSS class name

Pseudo-elements can be used with CSS class names:

Example:

p.intro::first-letter {
  color: #b45dea;
  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 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:

: : first – letter sample:

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

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

3.4 ::first-linePseudo elements

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

The following example styles the first line of all paragraph

elements:

Example:

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.

Attributes that 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

Pseudo-elements are written as follows:

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.

3.5 CSS – ::selectionPseudo 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 shows text selected by the user as the specified color on a yellow background:

Example: : selection:

::selection {
  color: #fff;
  background: #b45dea;
}
Copy the code