Interactive States and Pseudo-elements CSS Tutorial | SovranCode

Course contentsInteractive States and Pseudo-elements · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 64 min

Interactive States and Pseudo-elements

Style links and controls across hover, focus, active, checked, disabled, and generated decorative parts.

Pseudo-classes select elements in a state or relationship, while pseudo-elements select a generated or special part. State styling should reinforce native semantics rather than simulate them. A hover-only interface excludes keyboard and touch use, and generated content must not be the only source of essential information.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.button:hover { translate: 0 -2px; } .button:focus-visible { outline: 3px solid #ad5b00; outline-offset: 3px; } .button[aria-pressed='true']::before { content: '✓'; margin-inline-end: .5em; }

Working rules

Design default, hover, focus, active, and disabled states together
Use generated content only for decoration or redundant cues
Test state combinations such as focused and disabled

A common mistake

A pseudo-element cannot repair missing accessible names or turn a non-interactive element into a button.

Guided practice

Style a button whose selected state is clear with text, shape, and a redundant generated mark.

Copy the example into the editable notebook below.

CSS DEEP DIVE · ABOUT 32 MIN

Design a complete control state system

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

States can overlap

A control may be hovered and focused, pressed and focused, or disabled while the pointer rests over it. Write states as a coherent system instead of isolated effects. The default state must remain recognizable before interaction. :hover reflects pointing-device hit testing and is not a universal signal of intent. :focus-visible uses browser heuristics to show focus where a visible indicator is useful, commonly for keyboard interaction. :active is generally brief while activation occurs; it is not the same as a persistent selected state. Use semantic attributes such as aria-pressed or aria-current when the component’s actual behavior requires them, then style those attributes.

Functional pseudo-classes keep selectors expressive

:is() adopts the specificity of its most specific argument, while :where() always contributes zero specificity. :not() excludes matches, and :has() can select an element based on relative selectors when browser support meets the project’s requirements. These functions can simplify a component but can also hide unexpectedly strong specificity. Read the complete selector, test its matching set in developer tools, and keep progressive enhancement in mind. Do not use :has() to move critical behavior into CSS; it changes selection and styling, not application state, keyboard semantics, or form validation.

Generated content is presentational

::before and ::after create generated boxes attached to an element’s formatting structure. They are useful for a decorative rule, shape, or a redundant state mark. Support across accessibility combinations varies, so essential instructions, button names, error messages, and meaningful data belong in HTML. Generated content can also change layout, which means a long translated label or zoomed text can expose collisions. Use logical margins around a generated mark, inherit currentColor when appropriate, and verify forced-color mode. If removing the pseudo-element changes the task a person can complete, it probably carries too much meaning.

Tab across the buttons, hover them, and inspect the pressed attribute. Remove ::before and confirm that text, color, and the attribute still preserve the selected state.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; }
.mode { padding:.8rem 1rem; border:2px solid currentColor; background:white; color:#174986; font:inherit; }
.mode[aria-pressed="true"] { background:#174986; color:white; }
.mode[aria-pressed="true"]::before { content:"✓"; margin-inline-end:.5rem; }
.mode:hover:not(:disabled) { translate:0 -2px; }
.mode:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
.mode:disabled { opacity:.55; cursor:not-allowed; }
</style>
</head>
<body>
<main><h1>Choose a study mode</h1><div class="actions"><button class="mode" type="button" aria-pressed="true">Guided practice</button><button class="mode" type="button" aria-pressed="false">Independent lab</button><button class="mode" type="button" disabled>Mentor review unavailable</button></div><p>The pressed state is written in the HTML; CSS presents it.</p></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; }
.mode { padding:.8rem 1rem; border:2px solid currentColor; background:white; color:#174986; font:inherit; }
.mode[aria-pressed="true"] { background:#174986; color:white; }
.mode[aria-pressed="true"]::before { content:"✓"; margin-inline-end:.5rem; }
.mode:hover:not(:disabled) { translate:0 -2px; }
.mode:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
.mode:disabled { opacity:.55; cursor:not-allowed; }
</style>
</head>
<body>
<main><h1>Choose a study mode</h1><div class="actions"><button class="mode" type="button" aria-pressed="true">Guided practice</button><button class="mode" type="button" aria-pressed="false">Independent lab</button><button class="mode" type="button" disabled>Mentor review unavailable</button></div><p>The pressed state is written in the HTML; CSS presents it.</p></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.tab:hover { color: red; }
.tab::after { content: "Current"; }

Reveal repair and explanation

.tab[aria-current="page"] { font-weight:800; border-block-end:3px solid; }
.tab:focus-visible { outline:3px solid; outline-offset:3px; }

Hover does not represent the persistent current-page state, and generated text should not invent that state. Mark the current link semantically and supply a distinct keyboard focus treatment.

INDEPENDENT LAB

Build it without copying

Build a three-control toolbar with default, hover, focus-visible, active, selected, and disabled presentations. Use a pseudo-element only as a redundant selected mark.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Design a complete control state system lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Design a complete control state system</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Design a complete control state system lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Design a complete control state system</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Every usable control has a visible keyboard focus indicator.Persistent state is represented by a semantic HTML attribute, not inferred from hover.Removing generated content does not remove essential instructions or names.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. Which selector contributes zero specificity regardless of its arguments?:where():is():has()

2. What is a safe use of ::before?A decorative mark reinforcing visible selected textThe only label for a submit buttonA replacement for aria-current

Loading saved work…