【CSS中的伪元素总结】

graph TD
    A[常用] --> B(::before)
    A --> C(::after)
    A --> D(::first-letter)
    A --> E(::first-line)
    
    F[较常用] --> G(::selection)
    F --> H(::placeholder)
    F --> I(::marker)
    
    J[偶尔用到] --> K(::-webkit-slider-thumb)
    J --> L(::-webkit-search-cancel-button)
    J --> M(::-webkit-search-results-button)
    J --> N(::-webkit-progress-bar)
    J --> O(::-webkit-progress-value)
    J --> P(::file-selector-button)
    
    Q[极少用到] --> R(::spelling-error)
    Q --> S(::-moz-range-thumb) 
    Q --> T(::highlight())
    Q --> U(::grammar-error)
    Q --> V(::slotted())
    

作用	代码	效果	支持情况
选择 Mozilla 浏览器中颜色选择器的颜色块	::-moz-color-swatch { … }	可以改变颜色块的样式，比如边框、大小、形状等	Firefox
选择 Mozilla 浏览器中按钮或输入框的内部边框和填充	::-moz-focus-inner { … }	可以去掉或修改内部边框和填充，比如颜色、宽度、样式等	Firefox
选择 Mozilla 浏览器中无序列表的项目符号	::-moz-list-bullet { … }	可以改变项目符号的样式，比如颜色、字体、大小等	Firefox
选择 Mozilla 浏览器中有序列表的数字	::-moz-list-number { … }	可以改变数字的样式，比如颜色、字体、大小等	Firefox
选择 Mozilla 浏览器中打印时每一页的内容	::-moz-page { … }	可以改变每一页内容的样式，比如边距、背景、页眉页脚等	Firefox
选择 Mozilla 浏览器中打印时每一组页面的内容	::-moz-page-sequence { … }	可以改变每一组页面内容的样式，比如边距、背景、页眉页脚等	Firefox
选择 Mozilla 浏览器中进度条的进度部分	::-moz-progress-bar { … }	可以改变进度部分的样式，比如颜色、高度、背景等	Firefox
选择 Mozilla 浏览器中范围输入框（滑块）的进度部分	::-moz-range-progress { … }	可以改变进度部分的样式，比如颜色、高度、背景等	Firefox
选择 Mozilla 浏览器中范围输入框（滑块）的滑块部分	::-moz-range-thumb { … }	可以改变滑块部分的样式，比如形状、大小、边框等	Firefox
选择 Mozilla 浏览器中范围输入框（滑块）的轨道部分	::-moz-range-track { … }	可以改变轨道部分的样式，比如颜色、高度、背景等	Firefox
选择 Mozilla 浏览器中滚动时每一组页面的内容（类似于 ::-moz-page-sequence）	::-moz-scrolled-page-sequence { … }	可以改变每一组页面内容的样式，比如边距、背景、页眉页脚等	Firefox
选择 WebKit 浏览器中数字输入框（计数器）的内部按钮（增加或减少值）	::-webkit-inner-spin-button { … }	可以改变内部按钮的样式，比如形状、大小、颜色等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中仪表（meter）元素的条形部分（显示值）	::-webkit-meter-bar { … }	可以改变条形部分的样式，比如高度、宽度、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中仪表（meter）元素的条形部分中的低于最小值的部分	::-webkit-meter-even-less-good-value { … }	可以改变低于最小值的部分的样式，比如颜色、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中仪表（meter）元素的内部元素（包含条形部分和其他部分）	::-webkit-meter-inner-element { … }	可以改变内部元素的样式，比如边框、填充、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中仪表（meter）元素的条形部分中的最佳值的部分	::-webkit-meter-optimum-value { … }	可以改变最佳值的部分的样式，比如颜色、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中仪表（meter）元素的条形部分中的次佳值的部分	::-webkit-meter-suboptimum-value { … }	可以改变次佳值的部分的样式，比如颜色、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中数字输入框（计数器）的外部按钮（增加或减少值）	::-webkit-outer-spin-button { … }	可以改变外部按钮的样式，比如形状、大小、颜色等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中进度条（progress）元素的条形部分（显示进度）	::-webkit-progress-bar { … }	可以改变条形部分的样式，比如高度、宽度、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中进度条（progress）元素的内部元素（包含条形部分和其他部分）	::-webkit-progress-inner-element { … }	可以改变内部元素的样式，比如边框、填充、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中进度条（progress）元素的条形部分中的进度值的部分	::-webkit-progress-value { … }	可以改变进度值的部分的样式，比如颜色、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中滚动条（scrollbar）元素	::-webkit-scrollbar { … }	可以改变滚动条的样式，比如宽度、高度、背景等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中搜索框（search）元素的取消按钮（清除输入内容）	::-webkit-search-cancel-button { … }	可以改变取消按钮的样式，比如形状、大小、颜色等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中搜索框（search）元素的结果按钮（显示搜索结果）	::-webkit-search-results-button { … }	可以改变结果按钮的样式，比如形状、大小、颜色等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中范围输入框（滑块）元素的轨道部分（显示滑块范围）	::-webkit-slider-runnable-track { … }	可以改变轨道部分的样式，比如高度、宽度、颜色等	Chrome, Safari, Opera, Edge
选择 WebKit 浏览器中范围输入框（滑块）元素的滑块部分（显示滑块位置）	::-webkit-slider-thumb { … }	可以改变滑块部分的样式，比如形状、大小
在一个元素的内容之后插入生成的内容	::after { content: …; }	可以在元素后面添加文本、图像或其他内容，比如引号、图标等	所有主流浏览器
表示一个全屏幕覆盖层，用于显示一个 元素或一个全屏 API 的元素	::backdrop { … }	可以改变覆盖层的样式，比如背景颜色或透明度等	Chrome, Firefox, Safari, Edge
在一个元素的内容之前插入生成的内容	::before { content: …; }	可以在元素前面添加文本、图像或其他内容，比如引号、图标等	所有主流浏览器
表示视频字幕（ 元素）中的文本轨道区域	::cue { … }	可以改变字幕的样式，比如颜色、字体、位置等	Chrome, Safari, Opera
表示视频字幕（ 元素）中的文本轨道区域中的特定区域（由 cue-region-id 属性指定）	::cue-region(cue-region-id) { … }	可以改变特定区域的样式，比如颜色、字体、位置等	Chrome, Safari, Opera
表示文件选择框（<input type=“file”> 元素）中的按钮部分（显示选择文件或文件名）	::file-selector-button { … }	可以改变按钮部分的样式，比如形状、大小、颜色等	Chrome, Firefox, Safari, Edge
选择一个元素中的第一个字母	::first-letter { … }	可以改变第一个字母的样式，比如颜色、字体、大小等	所有主流浏览器
选择一个元素中的第一行文本	::first-line { … }	可以改变第一行文本的样式，比如颜色、字体、大小等	所有主流浏览器
表示一个元素中语法错误的部分（由 spellcheck 属性控制）	::grammar-error { … }	可以改变语法错误部分的样式，比如下划线颜色或样式等	Safari
表示一个元素中被 highlight() 函数选中的部分（用于高亮显示文本）	::highlight(highlight-name) { … }	可以改变高亮部分的样式，比如背景颜色或透明度等	Chrome, Firefox, Safari
表示列表项（li 元素）中的项目符号或编号部分（由 list-style-type 属性控制）	::marker { … }	可以改变项目符号或编号部分的样式，比如颜色、字体、大小等	Chrome, Firefox, Safari, Edge
表示使用 shadow parts 技术定义为可自定义样式部分的影子 DOM 元素（用于创建自定义 HTML 元素）	::part(part-name) { … }	可以改变可自定义样式部分的样式，比如颜色、字体、大小等	Chrome, Firefox, Safari, Edge
表示输入框（ 或 元素）中的占位符文本（由 placeholder 属性指定）	::placeholder { … }	可以改变占位符文本的样式，比如颜色、字体、大小等	所有主流浏览器
表示一个元素中被用户选中的部分（用于复制或拖放操作）	::selection { … }	可以改变选中部分的样式，比如背景颜色或透明度等	所有主流浏览器
表示使用 slot 技术分配给影子 DOM 元素的内容（用于创建自定义 HTML 元素）	::slotted(slot-name) { … }	可以改变分配内容的样式，比如颜色、字体、大小等	Chrome, Firefox, Safari, Edge
表示一个元素中拼写错误的部分（由 spellcheck 属性控制）	::spelling-error { … }	可以改变拼写错误部分的样式，比如下划线颜色或样式等	Safari
表示一个元素中与搜索关键词匹配的部分（用于显示搜索结果）	::target-text { … }	可以改变匹配部分的样式，比如背景颜色或透明度等	Chrome
表示一个元素在过渡动画中的状态（用于创建平滑的视觉效果）	::view-transition { … }	可以改变过渡状态的样式，比如透明度、滤镜、变形等	无
表示一组元素在过渡动画中的状态（用于创建平滑的视觉效果）	::view-transition-group { … }	可以改变过渡状态的样式，比如透明度、滤镜、变形等	无
表示一对元素在过渡动画中的状态（用于创建平滑的视觉效果）	::view-transition-image-pair { … }	可以改变过渡状态的样式，比如透明度、滤镜、变形等	无
表示一个元素在过渡动画中的新状态（用于创建平滑的视觉效果）	::view-transition-new { … }	可以改变新状态的样式，比如透明度、滤镜、变形等	无
表示一个元素在过渡动画中的旧状态（用于创建平滑的视觉效果）	::view-transition-old { … }	可以改变旧状态的样式，比如透明度、滤镜、变形等	无