CSS3伪元素有哪些

CSS3伪元素主要包括以下几种：

1. ::before

• 作用：在元素的内容前插入内容。
• 语法：element::before { content: "your content"; }
• 示例：

  p::before {
    content: "Note: ";
    color: red;
  }
  

2. ::after

• 作用：在元素的内容后插入内容。
• 语法：element::after { content: "your content"; }
• 示例：

  p::after {
    content: ".";
    color: blue;
  }
  

3. ::first-letter

• 作用：选择并样式化元素的第一个字母。
• 语法：element::first-letter { property: value; }
• 示例：

  p::first-letter {
    font-size: 200%;
    color: green;
  }
  

4. ::first-line

• 作用：选择并样式化元素的第一个文本行。
• 语法：element::first-line { property: value; }
• 示例：

  p::first-line {
    font-weight: bold;
    line-height: 1.2;
  }
  

5. ::selection

• 作用：样式化用户选择（高亮显示）的文本。
• 语法：element::selection { property: value; }
• 示例：

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

6. ::placeholder

• 作用：样式化输入框的占位符文本。
• 语法：input::placeholder { property: value; }
• 示例：

  input::placeholder {
    color: gray;
    font-style: italic;
  }
  

7. ::placeholder-shown

• 作用：仅在输入框显示占位符时应用样式。
• 语法：input::placeholder-shown { property: value; }
• 示例：

  input::placeholder-shown {
    border-color: red;
  }
  

8. ::backdrop

• 作用：样式化元素背后的背景（如模态框的背景）。
• 语法：element::backdrop { property: value; }
• 示例：

  .modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
  

注意事项

• 伪元素通常需要配合content属性使用，除了::selection和::placeholder-shown。
• ::before和::after可以插入任何类型的字符，包括图片、文本、计数器等。
• ::first-letter和::first-line只能应用于块级元素。
• ::selection的样式在不同浏览器中可能会有所不同，需要进行兼容性测试。

通过合理使用这些伪元素，可以大大增强网页的视觉效果和用户体验。