使用伪元素创建装饰图案
使用 ::before 和 ::after 创建装饰形状、分隔线和叠加层，无需额外的 HTML。
使用伪元素创建装饰图案 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
纯 CSS 装饰理念
伪元素可以在无需额外 HTML 的情况下实现丰富的装饰效果。目标是：装饰不使用任何 div，所有视觉装饰都放入 CSS 中。
CSS 三角形
使用带透明边框的零尺寸元素创建三角形：
<div class="triangle"></div>工具提示箭头
使用 ::before 创建工具提示箭头：
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>对角线章节分隔线
在 ::after 上使用倾斜变换或裁剪路径创建倾斜的章节分隔线：
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>装饰性下划线
使用 ::after 创建动画下划线效果：
<a href="#">Hover me (underline animates in on :hover)</a>使用 ::after 创建徽章
无需额外的 HTML 元素即可创建通知徽章覆盖层：
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>图片上的渐变覆盖层
在图片上添加深色渐变覆盖层，以提高文本的可读性：
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>使用 ::before 创建勾选标记
使用 CSS 边框绘制自定义复选框勾选标记：
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>丝带横幅
使用定位负值的 ::before 在卡片上创建丝带效果：
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>闪烁加载效果
无需 JavaScript 即可创建 CSS 骨架屏加载闪烁效果：
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>快速检查
哪些属性组合可以创建纯 CSS 向上的三角形？
回顾
伪元素可以在无需额外 HTML 的情况下实现丰富的装饰模式：箭头、覆盖层、动画下划线、徽章、丝带和闪烁效果。这些效果都依赖于 content: "" + position: absolute，以及对边框、裁剪路径和变换的创造性运用。
常见问题解答
「使用伪元素创建装饰图案」课时是免费的吗？
是的 — 「使用伪元素创建装饰图案」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用伪元素创建装饰图案」这节课中我会学到什么？
使用 ::before 和 ::after 创建装饰形状、分隔线和叠加层，无需额外的 HTML。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「使用伪元素创建装饰图案」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。