CSS • Chapter 8 • Foundations to Production
Pseudo-Elements
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
8.1 before
before is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For before in Chapter 8, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for before, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 8, topic 1.
Concept in plain language
before is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal language selector for before. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 8, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the course card example for before. Predict the visual difference before reloading the page. Chapter 8, topic 1, example 2.
Example 3: Narrow-screen test
Test before in the navigation bar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 8, topic 1, example 3.
Example 4: Translated-text test
Translate the article into a language with longer labels while using before. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 8, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the profile panel to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 8, topic 1, example 5.
Example 6: Accessibility test
Check before in the search form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 8, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the dashboard and determine why the declaration for before wins or loses using the browser's Styles and Computed panels. Chapter 8, topic 1, example 7.
Example 8: Content-stress test
Fill the photo gallery with very long words, URLs, translated text, images, and nested controls. Adjust before without hiding meaningful content. Chapter 8, topic 1, example 8.
Example 9: Refactoring test
Rewrite the pricing table so before uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 8, topic 1, example 9.
Example 10: Production review
Review before in the lesson sidebar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 8, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<p class="tip">Use logical properties.</p>
<style>
.tip::before { content: "Tip: "; font-weight: 800; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate before.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ::before inserts generated content before the element's content.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates before without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 8, topic 1.
Practice exercise
Build a fresh example for before from Chapter 8. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
8.2 after
after is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For after in Chapter 8, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for after, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 8, topic 2.
Concept in plain language
after is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal article for after. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 8, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the profile panel example for after. Predict the visual difference before reloading the page. Chapter 8, topic 2, example 2.
Example 3: Narrow-screen test
Test after in the search form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 8, topic 2, example 3.
Example 4: Translated-text test
Translate the dashboard into a language with longer labels while using after. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 8, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the photo gallery to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 8, topic 2, example 5.
Example 6: Accessibility test
Check after in the pricing table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 8, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the lesson sidebar and determine why the declaration for after wins or loses using the browser's Styles and Computed panels. Chapter 8, topic 2, example 7.
Example 8: Content-stress test
Fill the contact form with very long words, URLs, translated text, images, and nested controls. Adjust after without hiding meaningful content. Chapter 8, topic 2, example 8.
Example 9: Refactoring test
Rewrite the button group so after uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 8, topic 2, example 9.
Example 10: Production review
Review after in the data table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 8, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<a class="external" href="https://example.com">Reference</a>
<style>
.external::after { content: " ↗"; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate after.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ::after inserts generated content after the element's content.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates after without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 8, topic 2.
Practice exercise
Build a fresh example for after from Chapter 8. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
8.3 first-letter
first-letter is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For first-letter in Chapter 8, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for first-letter, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 8, topic 3.
Concept in plain language
first-letter is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal dashboard for first-letter. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 8, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the photo gallery example for first-letter. Predict the visual difference before reloading the page. Chapter 8, topic 3, example 2.
Example 3: Narrow-screen test
Test first-letter in the pricing table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 8, topic 3, example 3.
Example 4: Translated-text test
Translate the lesson sidebar into a language with longer labels while using first-letter. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 8, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the contact form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 8, topic 3, example 5.
Example 6: Accessibility test
Check first-letter in the button group with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 8, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the data table and determine why the declaration for first-letter wins or loses using the browser's Styles and Computed panels. Chapter 8, topic 3, example 7.
Example 8: Content-stress test
Fill the media player with very long words, URLs, translated text, images, and nested controls. Adjust first-letter without hiding meaningful content. Chapter 8, topic 3, example 8.
Example 9: Refactoring test
Rewrite the notification so first-letter uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 8, topic 3, example 9.
Example 10: Production review
Review first-letter in the language selector for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 8, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<p class="intro">CSS can style the first letter.</p>
<style>
.intro::first-letter { font-size: 2.5em; font-weight: 800; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate first-letter.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ::first-letter targets the first typographic letter of eligible block content.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates first-letter without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 8, topic 3.
Practice exercise
Build a fresh example for first-letter from Chapter 8. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
8.4 selection
selection is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For selection in Chapter 8, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for selection, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 8, topic 4.
Concept in plain language
selection is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal lesson sidebar for selection. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 8, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the contact form example for selection. Predict the visual difference before reloading the page. Chapter 8, topic 4, example 2.
Example 3: Narrow-screen test
Test selection in the button group at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 8, topic 4, example 3.
Example 4: Translated-text test
Translate the data table into a language with longer labels while using selection. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 8, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the media player to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 8, topic 4, example 5.
Example 6: Accessibility test
Check selection in the notification with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 8, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the language selector and determine why the declaration for selection wins or loses using the browser's Styles and Computed panels. Chapter 8, topic 4, example 7.
Example 8: Content-stress test
Fill the course card with very long words, URLs, translated text, images, and nested controls. Adjust selection without hiding meaningful content. Chapter 8, topic 4, example 8.
Example 9: Refactoring test
Rewrite the navigation bar so selection uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 8, topic 4, example 9.
Example 10: Production review
Review selection in the article for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 8, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<p>Select this sentence with the mouse.</p>
<style>
::selection { background: #fde68a; color: #111827; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate selection.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ::selection styles the portion of text selected by the user.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates selection without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 8, topic 4.
Practice exercise
Build a fresh example for selection from Chapter 8. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
8.5 marker
marker is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For marker in Chapter 8, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for marker, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 8, topic 5.
Concept in plain language
marker is part of the CSS system covered in Chapter 8. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal data table for marker. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 8, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the media player example for marker. Predict the visual difference before reloading the page. Chapter 8, topic 5, example 2.
Example 3: Narrow-screen test
Test marker in the notification at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 8, topic 5, example 3.
Example 4: Translated-text test
Translate the language selector into a language with longer labels while using marker. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 8, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the course card to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 8, topic 5, example 5.
Example 6: Accessibility test
Check marker in the navigation bar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 8, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the article and determine why the declaration for marker wins or loses using the browser's Styles and Computed panels. Chapter 8, topic 5, example 7.
Example 8: Content-stress test
Fill the profile panel with very long words, URLs, translated text, images, and nested controls. Adjust marker without hiding meaningful content. Chapter 8, topic 5, example 8.
Example 9: Refactoring test
Rewrite the search form so marker uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 8, topic 5, example 9.
Example 10: Production review
Review marker in the dashboard for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 8, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<ul><li>One</li><li>Two</li></ul>
<style>
li::marker { color: #7c3aed; font-weight: 800; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate marker.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- ::marker styles list item markers.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates marker without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 8, topic 5.
Practice exercise
Build a fresh example for marker from Chapter 8. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 8 review — 10 questions and answers
1. What should you inspect first when before does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for before. Then reduce the example until the winning declaration is clear.
2. How should before be checked before publishing?
Answer: Test before on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when after does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for after. Then reduce the example until the winning declaration is clear.
4. How should after be checked before publishing?
Answer: Test after on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when first-letter does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for first-letter. Then reduce the example until the winning declaration is clear.
6. How should first-letter be checked before publishing?
Answer: Test first-letter on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when selection does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for selection. Then reduce the example until the winning declaration is clear.
8. How should selection be checked before publishing?
Answer: Test selection on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when marker does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for marker. Then reduce the example until the winning declaration is clear.
10. How should marker be checked before publishing?
Answer: Test marker on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.