Pseudo elements

A pseudo-element is a keyword appended to the end of a selector that allows you to style specific parts of the selected element

Customize the appearance of the scroll bar

In CSS, we can customize the appearance of the scrollbar using -webkit-scrollBar. This property provides seven pseudo-elements:

• ::-webkit-scrollbar: The entire scroll bar
• ::-webkit-scrollbar-button: scroll bar button (down arrow)
• ::-webkit-scrollbar-thumb: Scroll slider on scroll bar
• ::-webkit-scrollbar-track: Scroll bar track
• ::-webkit-scrollbar-track-piece: Scroll bar The part of a track without a slider
• ::-webkit-scrollbar-corner: The part where both vertical and horizontal scroll bars meet
• ::-webkit-resizer: Partial styles of the intersection parts of some elements (similartextareaThe draggable button of

html {
  --maxWidth: 1284px;
  scrollbar-color: linear-gradient(to bottom, #ff8a00.#da1b60);
  scrollbar-width: 30px;
  background: #100e17;
  color: #fff;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}

html::-webkit-scrollbar-thumb {
  background: -webkit -
    gradient(linear, left top, left bottom, from(#ff8a00), to(#da1b60));
  background: linear-gradient(to bottom, #ff8a00.#da1b60);
  border-radius: 30px;
  -webkit-box-shadow: inset 2px 2px 2px rgba(255.255.255.0.25),
    inset -2px -2px 2px rgba(0.0.0.0.25);
  box-shadow: inset 2px 2px 2px rgba(255.255.255.0.25),
    inset -2px -2px 2px rgba(0.0.0.0.25);
}
html::-webkit-scrollbar-track {
  background: linear-gradient(
    to right,
    #201c29.#201c29 1px.#100e17 1px.#100e17
  );
}
Copy the code

With these pseudo-elements, you can create your own scrollbar look, as in this example:

::first-line

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

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.

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

::first-letter

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

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

::before

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

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

<h1This is a title </h1>
<p>::beforePseudo-elements insert content before the content of an element. </p>
<h1This is a title </h1>
Copy the code

::after

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

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

<h1This is a title </h1>
<p>::afterPseudo-elements insert content after an element. </p>
<h1This is a title </h1>
Copy the code

::selection

:: 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

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

::placeholder

Select placeholder text for a form element, which allows developers and designers to customize the style of placeholder text.

input::placeholder {
  color: red;
  font-size: 1.2 em;
  font-style: italic;
}
<inputPlaceholder =" I'm red!" >Copy the code

::backdrop

Instantly render boxes under any element that is in full-screen mode (and above all other elements that are lower in the heap).

video::backdrop {
  background-color: # 448;
}
Copy the code

Note the effect of backdrop backdrop, dark blue and gray on the upper and lower parts. This area is usually black, but the CSS statement above modifies its appearance.

::grammar-error

Applies to a text segment that the browser identifies as syntactically incorrect

Only a small amount of CSS can be applied to the :: grammer-error selector

• color
• background-color
• cursor
• text-emphasis-color (en-US)
• text-shadow
• outline
• text-decoration

::slotted()

Use to select the elements to be placed in the HTML template

::cue (:cue)

Matches the WebVTT prompt in the selected element. This can be used to use captions and other cues in media on VTT tracks.

Only a small subset of CSS attributes can be used with :: cue pseudo-elements:

• color
• opacity
• visibility
• text-decoration
• text-shadow
• background
• outline
• font
• line-height
• white-space
• text-combine-upright (en-US)
• ruby-position (en-US)

::marker

Select a marker box for a List item, which usually contains a bullet or number. It works on any element or pseudo-element with display: list-item set

ul li::marker {
  color: red;
  font-size: 1.5 em;
}
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
Copy the code

::spelling-error

Represents a text segment marked by the browser as incorrectly spelled.

::spelling-error {
  color: red;
}
Copy the code

Only a small number of CSS properties are available for ::spelling-error pseudo-element selector:

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration
• text-emphasis-color (en-US)
• text-shadow

CSS pseudo-classes

CSS pseudo-classes are keywords added to the selector that specify the particular state of the element to be selected