请举例说明伪元素 (pseudo-elements) 有哪些用途？

伪元素在前端开发中用途广泛，以下是一些常见的例子：

1. 样式化特定内容:

• ::before 和 ::after 可以用来插入生成的内容，例如图标、计数器、引号等。

  .quote::before {
    content: open-quote;
  }
  .quote::after {
    content: close-quote;
  }
  

• ::first-letter 可以用来样式化第一个字母，例如首字母放大。

  p::first-letter {
    font-size: 2em;
    float: left;
  }
  

• ::first-line 可以用来样式化第一行文字，例如改变字体颜色。

  p::first-line {
    color: blue;
  }
  

• ::selection 可以用来样式化用户选中的文本。

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

2. 创建复杂的布局效果:

• ::before 和 ::after 结合绝对定位和内容属性可以创建各种形状，例如三角形、箭头等，用于装饰或指示方向。

  .arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
  }
  

• ::before 和 ::after 可以用来创建清除浮动的效果，避免父元素塌陷。 (虽然现在更推荐使用flexbox或grid，但理解这个技巧仍然有帮助)

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  

3. 改善用户体验:

• ::placeholder 可以用来设置输入框的占位符文本样式。

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

• ::marker 可以用来样式化列表项的标记，例如改变颜色、形状或使用自定义图像。

  li::marker {
    content: ">";
    color: red;
  }
  

4. 配合计数器使用:

• ::before 和 ::after 可以结合CSS计数器(counter-reset, counter-increment, counter() 函数)实现自动编号等功能。

总而言之，伪元素提供了一种强大的机制，可以用来在不改变HTML结构的情况下，对文档进行样式化和添加内容，从而实现各种视觉效果和功能。 它们是前端开发中非常重要的工具。