跳至主要內容

CSS 伪元素

Kpsmart2025年3月4日大约 5 分钟

CSS 伪元素

CSS 伪元素是添加到选择器的关键字，用于设置所选元素特定部分的样式。本文档提供了 CSS 伪元素的完整参考。

伪元素与伪类的区别

  • 伪元素：创建不存在于文档树中的元素，用双冒号 :: 表示（如 ::before）
  • 伪类：选择处于特定状态的已有元素，用单冒号 : 表示（如 :hover）

兼容性说明

为了兼容旧版浏览器，有些伪元素也可以使用单冒号（如 :before），但在新代码中推荐使用双冒号语法。

常用伪元素

伪元素描述示例
::before在元素内容之前插入内容p::before
::after在元素内容之后插入内容p::after
::first-letter选择元素的第一个字母p::first-letter
::first-line选择元素的第一行p::first-line
::selection选择用户选中的部分p::selection
::placeholder选择表单元素的占位符文本input::placeholder
::marker选择列表项的标记li::marker
::backdrop选择全屏元素后面的背景dialog::backdrop
::cue选择 WebVTT 字幕::cue
::file-selector-button选择文件上传控件的按钮input[type="file"]::file-selector-button
::part()选择 Shadow DOM 中的部分custom-element::part(button)
::slotted()选择放置在 Shadow DOM 插槽中的元素::slotted(p)

::before 和 ::after 伪元素

::before 和 ::after 伪元素用于在元素内容前后插入内容，是最常用的伪元素。

content 属性

::before 和 ::after 伪元素必须设置 content 属性才能显示。content 属性可以接受以下值：

content 值描述示例
"string"文本字符串content: "Hello";
url()外部资源（如图片）content: url(icon.png);
attr()获取元素的属性值content: attr(title);
counter()计数器content: counter(section);
open-quote/close-quote引号content: open-quote;
no-open-quote/no-close-quote抑制引号content: no-open-quote;
""空内容（用于纯装饰）content: "";
normal默认值，不生成任何内容content: normal;
none不生成任何内容content: none;

使用示例

::before 和 ::after 示例

/* 基本用法 */
.quote::before {
  content: '"';
  font-size: 2em;
  color: #999;
}

.quote::after {
  content: '"';
  font-size: 2em;
  color: #999;
}

/* 使用属性值 */
a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
}

/* 创建装饰元素 */
.fancy-box::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border: 2px solid #333;
  z-index: -1;
}

/* 使用图标 */
.external-link::after {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('external-link-icon.svg') no-repeat;
  margin-left: 4px;
}

/* 使用计数器 */
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

::first-letter 和 ::first-line 示例

/* 首字下沉效果 */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: #900;
  float: left;
  margin-right: 8px;
  line-height: 0.8;
}

/* 首行特殊样式 */
p::first-line {
  font-variant: small-caps;
  color: #555;
}

/* 组合使用 */
.intro::first-letter {
  font-size: 3em;
  color: #c00;
}

.intro::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

::selection 示例

/* 基本选择样式 */
::selection {
  background-color: #ffb7b7;
  color: #333;
}

/* 特定元素的选择样式 */
article p::selection {
  background-color: #b3d4fc;
  color: #000;
}

.highlight::selection {
  background-color: #ffd700;
  color: #000;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

::placeholder 示例

/* 基本占位符样式 */
input::placeholder {
  color: #999;
  font-style: italic;
}

/* 渐变占位符文本 */
.fancy-input::placeholder {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* 占位符状态变化 */
input:focus::placeholder {
  color: #ccc;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

::marker 示例

/* 基本标记样式 */
li::marker {
  color: #900;
  font-weight: bold;
}

/* 不同级别的标记样式 */
ol > li::marker {
  color: #060;
  font-weight: bold;
}

ul > li::marker {
  color: #00c;
  content: "→ ";
}

/* 特定列表项的标记 */
li.important::marker {
  color: red;
  content: "! ";
}

::backdrop 示例

/* 对话框背景 */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

/* 全屏视频背景 */
video:fullscreen::backdrop {
  background-color: black;
}

::file-selector-button 示例

/* 自定义文件选择按钮 */
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 0.5s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

实用技巧

清除浮动

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

创建三角形

.triangle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #333;
}

添加工具提示

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

自定义复选框

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

.custom-checkbox label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
  content: "✓";
  position: absolute;
  left: 5px;
  top: -2px;
  color: #2ecc71;
  font-size: 18px;
}

浏览器兼容性

伪元素ChromeFirefoxSafariEdgeIE
::before, ::after1+1+1+12+8+ (单冒号)
::first-letter1+1+1+12+5.5+ (单冒号)
::first-line1+1+1+12+5.5+ (单冒号)
::selection1+1+1.3+12+9+
::placeholder57+51+10.1+79+不支持
::marker86+68+11.1+86+不支持
::backdrop37+47+10.1+79+不支持
::file-selector-button89+82+15.4+89+不支持
::part()73+72+13.1+79+不支持
::slotted()53+63+10+79+不支持

注意事项

  1. content 属性的限制：content 属性生成的内容不是实际的 DOM 元素，无法被选中、复制或交互。
  2. 可访问性考虑：伪元素生成的内容对屏幕阅读器可能不可见，不应用于传达重要信息。
  3. 空 content 值：即使不需要显示内容，也必须为 ::before 和 ::after 设置 content: "";。
  4. 伪元素的定位：伪元素默认是行内元素，如需定位，通常需要设置为 display: block 或 display: inline-block。
  5. 单冒号兼容性：为了兼容旧浏览器，可以使用单冒号语法（如 :before），但推荐使用双冒号。

相关资源