css常见伪元素及伪元素使用方式

CSS中的伪元素是一种虚拟的元素，它们并不是实际存在于文档流中的，但可以通过选择器来样式化。常见的伪元素包括：

1. `::before` 和 `::after`: 这些伪元素用于在元素内容之前（`::before`）或之后（`::after`）插入内容，常用于生成边饰、图标、提示文本等。例如：

   .element::before {
     content: "前缀文字";
     display: inline-block;
   }

2. `::first-letter` 和 `::first-line`: 分别作用于元素的第一个字母和第一行的内容，通常用于强调首字或调整行间距。如：

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

3. `::selection`: 当用户选中元素内的文本时，此伪元素会被应用，可以设置选中效果的样式。例如：

   ::selection {
     background-color: yellow;
   }

4. `::placeholder`: 针对输入框的占位符文本，仅在浏览器支持的情况下生效。

5. `:hover`, `:focus`, `:active`, `:visited`: 都不是真正的伪元素，而是状态相关的伪类，分别对应鼠标悬停、获取焦点、按下按钮和访问过链接的不同状态。