css之伪元素、selection、first、letter、line、marker、placeholder、cue、grammar、spelling、error、backdrop、target

---

foreword

CSSPseudo-elements are a powerful feature that allow styling specific parts of selected elements without additional JavaScriptcode. While many developers are familiar with commonly used pseudo-elements such as ::beforeand ::after, there are others that are often overlooked or underused. In this article, we'll share 9a little-known CSSpseudo-element that enhances your styling capabilities.

---

1. ::selection pseudo-element

::selectionThe pseudo-element targets the portion of text selected by the user. It provides a way to apply styles to selected text and customize its appearance.

::selection {
     
     
  background-color: yellow;
  color: red;
}

In the above code, when user selects text on the page, it will be highlighted with yellow background and red text color.

---

2. ::first-letter pseudo-element

::first-letterPseudo-elements allow to style the first letter of block-level elements. It comes in handy when you want to apply special formatting to the initial characters of a paragraph or heading.

p::first-letter {
     
     
  font-size: 2em;
  color: red;
}

In the code snippet above, the first letter of each paragraph will be displayed in a larger font and displayed in red.

---

3. ::first-line pseudo element

Similarly ::first-letter, ::first-linepseudo-elements target the first line of text or block-level elements. You can use this pseudo-element to apply a specific style to the start line of a paragraph or heading.

p::first-line {
     
     
  font-weight: bold;
  text-decoration: underline;
}

In the code above, the first line of each paragraph will be bold and underlined.

---

4. ::marker pseudo-element

::markerPseudo-elements target the markup of a list item, such as a bullet point in an unordered list or a number in an ordered list. Using this pseudo-element, you can customize the appearance of the markup.

li::marker {
     
     
  color: blue;
  font-weight: bold;
}

---

5. ::placeholder pseudo-element

::placeholderPseudo-elements allow to style placeholder text in input fields and textareas. By applying custom styles to placeholders, you can enhance the user experience and make it consistent with the overall design.

input::placeholder {
     
     
  color: #999;
  font-style: italic;
}

In the above code, the placeholder text in the input field will be displayed in light gray and italic font style.

---

6. ::cue pseudo-element

::cueThe pseudo-element targets the tooltip text of the <audio>or element. <video>Prompt text is often used for subtitles or subtitles in multimedia content. Using this pseudo-element, styles can be applied specifically to the hint text.

video::cue {
     
     
  color: white;
  background-color: black;
}

In the code above, the hint text in the video element will have a white text color and a black background.

---

7. ::grammar-error and ::spelling-error pseudo-elements

::grammar-errorand ::spelling-errorpseudo-elements allow styling parts of text marked as grammatical or spelling errors, respectively. These pseudo-elements can be used to provide visual cues to users when there are errors in the content.

p::grammar-error {
     
     
  text-decoration: line-through;
  color: red;
}

p::spelling-error {
     
     
  text-decoration: underline;
  color: blue;
}

In the above code, grammatical errors in the paragraph will be displayed with underlined text decoration and red, while spelling errors will be displayed with underline and blue.

---

8. ::backdrop pseudo-element

::backdropPseudo-elements APIare used in conjunction with fullscreen to customize the background behind an element in fullscreen mode. It allows changing the default black background to a custom color or style.

video::backdrop {
     
     
  background-color: gray;
}

In the code above, when a video element is in fullscreen mode, the background behind it will have a gray background color.

---

9. ::target-text pseudo-element

::target-text``CSSPseudo-element representing the text to scroll to (if the browser supports text fragments). It allows the author to choose how to highlight that part of the text.

::target-text {
     
     
  background-color: rebeccapurple;
  color: white;
}

Here is MDNthe online example provided. Note that this APIis currently experimental.

---

in conclusion

CSSPseudo-elements offer a wide range of possibilities for styling specific parts of an element and enhancing the visual appeal of a web page. JavaScriptAchieve impressive styling effects without using too much code.