CSS 伪元素是用于向文档的某些部分添加样式的虚拟元素。它们通过使用双冒号 :: 来表示，与伪类区分开。以下是一些常见的 CSS 伪元素：

1. ::before 和 ::after：

这两个伪元素用于在元素的内容前后插入虚拟的子元素，常用于添加装饰性内容。
.element::before {
  content: "→ ";
}

.element::after {
  content: " ←";
}

2. ::first-line 和 ::first-letter：

  •  ::first-line 用于选择元素的第一行。

  •  ::first-letter 用于选择元素的第一个字母。

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

p::first-letter {
  font-size: 150%;
  font-weight: bold;
}

3. ::selection：

::selection 伪元素用于选择用户选中的文本。
::selection {
  background-color: yellow;
  color: black;
}

4. ::placeholder：

::placeholder 伪元素用于选择表单元素的占位符文本。
input::placeholder {
  color: gray;
}

5. ::after 和 ::before 实际案例：
/* 创建引用标记样式 */
blockquote::before {
  content: "\201C"; /* 左双引号 */
  font-size: 2em;
  color: #999;
  margin-right: 0.1em;
}

blockquote::after {
  content: "\201D"; /* 右双引号 */
  font-size: 2em;
  color: #999;
  margin-left: 0.1em;
}

这些伪元素可以用于改变文档的外观和样式，提供了更灵活的设计和布局选项。它们通常用于向特定部分添加样式，而不需要在 HTML 结构中添加额外的元素。


转载请注明出处：http://www.zyzy.cn/article/detail/4013/CSS