Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

As we all know, page styles are usually written in CSS rules. But sometimes JavaScript is used to achieve specific effects. The best practice, of course, is separation of responsibilities: CSS for presentation, HTML for structure, and JavaScript for behavior. So, style can be solved with CSS, try not to use JavaScript. The code is cleaner, easier to maintain, and performs better.

This article introduces five CSS pseudo-elements that you’ve probably never heard of or haven’t used before. Take a look!

::first-letter

Styles the first character on the first line of a block-level element that is preceded by no other content (such as a picture or an inline table). This pseudo-element is more commonly used in blog posts, such as:

Using pseudo-classes is easier:

html

<div>
    <p>Styles the first character on the first line of a block-level element that is preceded by no other content (such as a picture or an inline table).</p>
 </div>
Copy the code

css


p {
  line-height: 1.5;
}

p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px3px0 red;
  font-size: 250%;
  padding: 6px3px;
  margin-right: 6px;
  float: left;
}
 
Copy the code

Effect:

::first-line

Similar to ::first-letter, set the style of the first line of text or block-level elements.

html

  <div>
    <p>Similar to '::first-letter', this style is used to set the first line of text or block-level elements.</p>
    <p>Similar to '::first-letter', this style is used to set the first line of text or block-level elements.</p>
    <p>Similar to '::first-letter', this style is used to set the first line of text or block-level elements.</p>
    <p>Similar to '::first-letter', this style is used to set the first line of text or block-level elements.</p>
  </div>
Copy the code

css

div::first-line {
  color: blue;
  text-transform: uppercase;

  /* WARNING: These styles do not work */
  /* Many attributes are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}
Copy the code

The effect

::selection

Matching the selection selected by the user is partial. Only a few CSS properties can be applied to the :: Selection selector: color, BACKGROUND, CURSOR, and Outline.

html

<h1> Please try to select the text on the page </h1><p>This is a paragraph.</p>
<div>This is the text in the div element.</div>
Copy the code

css

::selection {
      color: #ff0000;
      background-color: aqua;
}
::-moz-selection {
  color: #ff0000;
  background-color: aqua;
}
Copy the code

The effect

Isn’t it amazing to see that the text we selected changes to the color we set?

::backdrop

Experimental: This is an Experimental feature. Some browsers are still developing this feature. Please refer to the browser compatibility table to see which prefixes are suitable for use in different browsers. The syntax and behavior of this feature may change in future versions of browsers as the standard documentation for this feature may be revised.

This pseudo-element is a bit of a facelift. It’s a viewPort-sized box that acts as a background when the page is in full-screen mode. For example, use it to set the background color of a full-screen video:

The sample

Copy the code

video::backdrop { background-color: #448; }

Copy the code

The effect

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.

::placeholder

The ::placeholder selector is used to select form elements with placeholder text and lets you set the style of the placeholder text.

The placeholder text is set using the placeholder property, which specifies the prompt text that describes the expected value of the input field.

Tip: In most browsers, the default color of placeholder text is light gray.

html

<input type="text" name="fname" placeholder="First name">
Copy the code

css

::-webkit-input-placeholder { /* Edge */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: red;
}

::placeholder {
  color: red;
}
Copy the code

The effect

This background is due to the fact that the browser’s night mode was triggered when I wrote it, and the color changed.

summary

These are a few more fun CSS pseudo-elements for you to present, I hope you can use it!

Daniel saw here think useful leave a thumbs-up! Comment for collection