Lab 5 — Session 3

Pseudo-elements & Box Model (≈ 60 min)

Overview

This one-hour lab focuses on two core topics: A) pseudo-elements for decorative UI without extra HTML, and B) the CSS box model for spacing, borders, outlines, and margins. Students will work on interactive components and complete concrete exercises for each part.

Duration: Approximately 60 minutes

Learning Objectives

By the end of this lab, students will be able to:

  • Use ::before/::after to add non-semantic decorative elements (quotation marks, badges).
  • Use the attr() function to dynamically pull content from HTML attributes into CSS.
  • Apply a consistent spacing scale with padding, margins, and box-sizing.
  • Differentiate borders vs. outlines to understand layout impact.
  • Create interactive hover effects using transforms and transitions.

Part A — Pseudo-elements

A1. Decorative Quotes (::before & ::after)

Create stylish quotation marks for blockquotes using both ::before and ::after pseudo-elements. This demonstrates how to add decorative content that enhances the visual presentation without cluttering the HTML.

Task 1: 📸 View Reference Screenshot

  1. Create .quote::before selector to add an opening quotation mark.
  2. Use content: "\201C"; (Unicode for left double quote ") in ::before.
  3. For ::before, set position: absolute; to position it independently.
  4. For ::before, set top: 16px; and left: 16px; for top-left positioning.
  5. For ::before, set font-size: 4rem; to make the quote large.
  6. For ::before, add color: var(--accent); and opacity: 0.8; for subtle effect.
  7. For ::before, set line-height: 1; to prevent affecting line spacing.
  8. For ::before, set font-family: Georgia, serif; and font-weight: bold; for elegant typography.
  9. Create .quote::after selector to add a closing quotation mark.
  10. Use content: "\201D"; (Unicode for right double quote ") in ::after.
  11. For ::after, set position: absolute; to position it independently.
  12. For ::after, set bottom: 8px; and right: 16px; for bottom-right positioning.
  13. For ::after, apply the same font properties as ::before (font-size, color, opacity, line-height, font-family, font-weight).
The best way to predict the future is to invent it. — Alan Kay
Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. — Martin Fowler

A2. Status Badges (::before)

Create status badges that appear in the top-right corner of cards using ::before pseudo-elements. This demonstrates how to add decorative labels with custom text content without modifying the HTML structure.

Task 2: 📸 View Reference Screenshot

  1. Create .badge-card::before with position: absolute; to position the badge.
  2. Set top: -10px; and right: -10px; to position it in the top-right corner.
  3. Add content: attr(data-status); to use the data-status attribute value as content.
  4. Set background: var(--accent); for the badge background color.
  5. Add color: white; and font-size: 0.75rem; for readable text styling.
  6. Set padding: 6px 12px; for internal spacing inside the badge.
  7. Add border-radius: 16px; for rounded pill shape.
  8. Set font-weight: 600; and text-transform: uppercase; for emphasis.
  9. Add box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); to lift the badge visually.

Course Module 1

Introduction to CSS pseudo-elements and their practical applications.

Course Module 2

Advanced layout techniques using Flexbox and Grid systems.

Course Module 3

Responsive design patterns and mobile-first development strategies.

Tip: The attr() function reads the data-status attribute from each card!

Part B — Box Model

B1. Stats Cards with Box Model

Create statistics cards to understand how padding, margin, and border work together. The box-sizing: border-box ensures that padding and border are included in the element's total width/height.

Task 3: 📸 View Reference Screenshot

  1. Add background: white; to .stat-card for the card background.
  2. Add padding: 24px; to .stat-card for internal spacing around content.
  3. Add border: 2px solid #e5e7eb; to .stat-card for a subtle border.
  4. Add border-radius: 8px; to .stat-card for rounded corners.
  5. Add text-align: center; to .stat-card to center the content.
  6. Add box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); to .stat-card for depth.
  7. Add transition: transform 0.2s ease, box-shadow 0.2s ease; to .stat-card for smooth hover effects.
  8. Create .stat-card:hover selector withå transform: translateY(-8px); and box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); for hover animation.
1,234
Students Enrolled
96%
Completion Rate
4.8★
Average Rating

Tip: Hover over the cards to see the smooth animation created by transform and box-shadow!

B2. Alert Boxes with Border Styles

Create alert notification boxes with colored left borders to understand how borders contribute to the box model. Each alert has different styling to indicate its type (success, warning, error).

Task 4: 📸 View Reference Screenshot

  1. Add padding: 16px 20px; to .alert-box for internal spacing.
  2. Add background: #f8fafc; to .alert-box for a light background.
  3. Add border-left: 4px solid; to .alert-box for the colored left border.
  4. Add border-radius: 4px; to .alert-box for slightly rounded corners.
  5. Add margin-bottom: 16px; to .alert-box to separate multiple alerts.
  6. Create .alert-success with border-left-color: #22c55e; and background: #f0fdf4; for green success style.
  7. Create .alert-warning with border-left-color: #f59e0b; and background: #fffbeb; for orange warning style.
  8. Create .alert-error with border-left-color: #ef4444; and background: #fef2f2; for red error style.
Success! Your changes have been saved successfully.
Warning: Please review your information before submitting.
Error: Unable to process your request. Please try again.

Tip: The left border provides visual categorization while padding ensures content doesn't touch the edges!

What to Submit

Upload the following to the BB:

  • index.html and styles.css
  • 4 screenshots showing Task 1, 2, 3 and 4