{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "css-pseudo-elements",
	"title": "CSS Pseudo-elements",
	"description": "Create decorative elements and style specific parts of content with pseudo-elements.",
	"difficulty": "intermediate",
	"lessons": [
		{
			"id": "pseudo-1",
			"title": "The ::before Element",
			"description": "Pseudo-elements let you style specific parts of an element. <kbd>::before</kbd> creates a virtual element as the first child.<br><br>It requires the <kbd>content</kbd> property to display anything (even if empty).<br><br><pre>.item::before {\n  content: \"→ \";\n}</pre>",
			"task": "Add a bullet before each list item using <kbd>::before</kbd> with <kbd>content: \"• \"</kbd>.",
			"previewHTML": "<ul class=\"list\"><li>First item</li><li>Second item</li><li>Third item</li></ul>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; }",
			"sandboxCSS": "",
			"codePrefix": ".list li::before {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "content: \"• \";",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "content",
					"message": "Use the <kbd>content</kbd> property"
				},
				{
					"type": "contains",
					"value": "•",
					"message": "Add a bullet character <kbd>•</kbd>"
				}
			]
		},
		{
			"id": "pseudo-2",
			"title": "Styling ::before",
			"description": "Pseudo-elements can be styled like any element. Add color, size, margins, and more.<br><br><pre>.item::before {\n  content: \"★\";\n  color: gold;\n  margin-right: 8px;\n}</pre>",
			"task": "Style the bullet with <kbd>color: coral</kbd>.",
			"previewHTML": "<ul class=\"list\"><li>First item</li><li>Second item</li><li>Third item</li></ul>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; } .list li::before { content: \"• \"; }",
			"sandboxCSS": "",
			"codePrefix": ".list li::before {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "color: coral;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "color", "expected": "coral" },
					"message": "Set <kbd>color: coral</kbd>"
				}
			]
		},
		{
			"id": "pseudo-3",
			"title": "The ::after Element",
			"description": "<kbd>::after</kbd> works like <kbd>::before</kbd> but inserts content as the last child. Common uses include badges, icons, or decorative elements.<br><br><pre>.new::after {\n  content: \" ✓\";\n  color: green;\n}</pre>",
			"task": "Add a checkmark after completed items with <kbd>content: \" ✓\"</kbd>.",
			"previewHTML": "<ul class=\"list\"><li class=\"done\">Buy groceries</li><li class=\"done\">Walk the dog</li><li>Read a book</li></ul>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .list { list-style: none; padding: 0; margin: 0; } .list li { padding: 8px 0; }",
			"sandboxCSS": "",
			"codePrefix": ".done::after {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "content: \" ✓\";",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "content",
					"message": "Use the <kbd>content</kbd> property"
				},
				{
					"type": "contains",
					"value": "✓",
					"message": "Add a checkmark <kbd>✓</kbd>"
				}
			]
		},
		{
			"id": "pseudo-4",
			"title": "Decorative Lines",
			"description": "Pseudo-elements with <kbd>content: \"\"</kbd> can create decorative shapes when combined with width, height, and background.<br><br><pre>.title::after {\n  content: \"\";\n  display: block;\n  width: 50px;\n  height: 3px;\n  background: coral;\n}</pre>",
			"task": "Create an underline decoration with <kbd>width: 40px</kbd>, <kbd>height: 3px</kbd>, and <kbd>background: steelblue</kbd>.",
			"previewHTML": "<h2 class=\"title\">About Us</h2><p>We build great things.</p>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .title { margin: 0 0 1rem; } .title::after { content: \"\"; display: block; margin-top: 8px; } p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".title::after {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "width: 40px;\n  height: 3px;\n  background: steelblue;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "width", "expected": "40px" },
					"message": "Set <kbd>width: 40px</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "height", "expected": "3px" },
					"message": "Set <kbd>height: 3px</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "background", "expected": "steelblue" },
					"message": "Set <kbd>background: steelblue</kbd>"
				}
			]
		}
	]
}