CSS 伪元素
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
CSS 伪元素让你无需添加额外 HTML 就能创建装饰性元素。
通过本 Lab，你将学会：
- ::before 和 ::after 的基本用法
- 使用 content 属性
- 创建装饰性图标和形状
- 实现下划线动画效果
Intermediate⏱ 20-25 min
Learning Objectives
- 理解伪元素的概念和用途
- 掌握 ::before 和 ::after 语法
- 学会使用 content 属性
- 创建悬停动画效果
- 实践装饰性设计技巧
Scenario
你正在为一个网站设计导航菜单和卡片组件，需要使用伪元素添加装饰效果而不改变 HTML 结构。
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSS伪元素UI装饰效果