正在加载...

CSS 伪元素

伪类在状态变化时改外观（:hover、:focus）。伪元素更进一步：你可以给文字的一部分设样式，或在真实内容前后造一个小盒子——用双冒号（::），HTML 里不必多加标签。

伪元素是什么意思？

伪元素是用 :: 接到选择器上的关键字。它瞄准标记里不是完整元素的东西：第一个字母、第一行，或内容前后的生成盒子。对 ::before 和 ::after，通常要设 content 才会显示内容。

四个常用伪元素

先学这些。旧的单冒号写法（:before）在很多浏览器里仍可用——但请写现代的双冒号。

📊 日常 CSS 伪元素

伪元素 样式作用于 示例
::before 元素内容前的盒子 p::before
::after 元素内容后的盒子 a::after
::first-letter 文本块的第一个字母 p::first-letter
::first-line 文本块的第一行 p::first-line

内容之前 — ::before 与 content

::before 在真实文字之前创建虚拟盒子。几乎总要写 content——字符串，或空装饰盒用 ""。

之前 — 开引号

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

别忘了 content

没有 content，很多 ::before/::after 规则什么也不显示。彩色条或背景图标用 content: "" 就够。

内容之后 — ::after

::after 是同一思路，放在内容之后——单位、徽章或小后缀。

之后 — 外链提示

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

别把必要含义藏在这里

屏幕阅读器和某些工具对生成内容的处理不一致。重要说明不要只放在 ::before/::after；真实文字留在 HTML 里。

首字母 — ::first-letter

::first-letter 给文本块的第一个字母设样式——段落开头经典大字效果。

首字母 — 更大的开头字符

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

首行 — ::first-line

::first-line 只样式化第一行可见文字——不是「第一句」，而是浏览器换行后形成的那一行。

首行 — 稍粗一点

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

空的装饰盒

有时只要一条色带、不要文字。content: "" 就够。

空的 before — 装饰条

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

好习惯

  • 伪元素 = 双冒号（::before）；伪类 = 单冒号（:hover）
  • 要看得见就给 ::before/::after 写 content
  • 必要文字放在 HTML，不要只放在生成内容里
  • ::first-letter 与 ::first-line 作用在有文字的块上
  • 即使旧 :before 还能用，也优先现代 ::

自己动手

  1. 短页面：.quote 段落、.lead 段落、a.external 链接、带文字的 .card。
  2. 写上 .quote::before { content: "“"; color: #0f766e; }，看引号。
  3. 在 class 为 external 的链接上：a.external::after { content: " ↗"; }。
  4. 把 .lead::first-letter 放大并设为 teal；给 .lead::first-line 加 font-weight: 600。
  5. 用 .card::before { content: ""; display: block; height: 4px; background: #0f766e; } 做顶条。

常见错误

  • 本意是 :hover 这类状态却写成 :before——状态单冒号；生成盒双冒号
  • 忘了 content 导致什么都不出现
  • 把警告的唯一副本只放在 ::after 里
  • 对空元素或纯图片元素指望 ::first-letter 出奇迹
  • 把 ::first-line 当成「第一句」——换行由浏览器决定

小结

  • 伪元素用 :: 样式化一部分或生成盒
  • ::before/::after 需要 content（字符串或 ""）
  • ::first-letter 与 ::first-line 取文本块开头
  • 关键含义留在 HTML
  • 单冒号 = 伪类；双冒号 = 伪元素
  • 用引号、链接后缀和 lead 段落练习

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程