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

What is the official explanation for false 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.

What are the common pseudo-elements?

  • ::after: Creates a pseudo-element as the last child of the selected element
  • ::before: Creates a pseudo-element that will be the first child of the matched selected element
  • :: CUE: matches the WebVTT prompt in the selected element
  • ::first-letter: selects the first letter of the first line of a block level element on a line with no other content (such as images and inline tables) preceding the text
  • ::first-line: Applies a style to the first line of a block-level element
  • :: Selection: applies to portions of a document that are highlighted by the user (such as portions selected using a mouse or other selection device)
  • :: Slotted: Identifies elements that are placed in an HTML template

Tips: The following pseudo-elements are functions in the experiment. Some of these features are still under development, please refer to the browser compatibility table to see which prefixes are suitable for use in different browsers. As the standard documentation for these features may be revised, the syntax and behavior of these features may change in future versions of the browser.

::backdrop

The :: Backdrop Applies to any element that is in full-screen mode.

For example, we changed the background color of the video to white (black by default) when it was displayed in full screen.

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

The effect is as follows:

: : grammar – error and: : spelling error

:: grammer-error applies to text segments that the browser identifies as syntactic errors.

::spelling-error applies to text that the browser marks as being incorrectly spelled.

::marker

::marker Styles the markup of a list item.

<! DOCTYPEhtml>
<html>
  <head>
    <style>/ / the key...::marker {
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
  </body>
</html>
Copy the code

The effect is as follows:

::placeholder

::placeholder applies to the placeholder text of a form element.

<! DOCTYPEhtml>
<html>
  <head>
    <style>
      input::placeholder {
        color: yellow;
        font-size: 1.2 em;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <input placeholder="I'm yellow!" />
  </body>
</html>
Copy the code

The effect is as follows: