Pseudo Elements

# Pseudo Elements

Review CSS and JavaScript for pseudo-element best practices and View Transitions API usage.

## How It Works

1. Read the specified files (or prompt user for files/pattern)
2. Check against all rules below
3. Output findings in `file:line` format

## Rule Categories

| Priority | Category | Prefix |
|----------|----------|--------|
| 1 | Before/After | `pseudo-` |
| 2 | View Transitions | `transition-` |
| 3 | Native Styling | `native-` |

## Rules

### Before/After Rules

#### `pseudo-content-required`
::before and ::after require content property to render.

**Fail:**
```css
.button::before {
  position: absolute;
  background: var(--gray-3);
}
```

**Pass:**
```css
.button::before {
  content: "";
  position: absolute;
  background: var(--gray-3);
}
```

#### `pseudo-over-dom-node`
Use pseudo-elements for decorative content instead of extra DOM nodes.

**Fail:**
```tsx
<button className={styles.button}>
  <span className={styles.background} /> {/* Unnecessary DOM node */}
  Click me
</button>
```

**Pass:**
```tsx
<button className={styles.button}>
  Click me
</button>
```
```css
.button::before {
  content: "";
  /* decorative background */
}
```

#### `pseudo-position-relative-parent`
Parent must have position: relative for absolute pseudo-elements.

**Fail:**
```css
.button::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* .button has no position */
```

**Pass:**
```css
.button {
  position: relative;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
}
```

#### `pseudo-z-index-layering`
Pseudo-elements need z-index to layer correctly with content.

**Fail:**
```css
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gray-3);
}
/* Covers button text */
```

**Pass:**
```css
.button {
  position: relative;
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gray-3);
  z-index: -1;
}
```

#### `pseudo-hit-target-expansion`
Use negative inset values to expand hit targets without extra markup.

**Fail:**
```tsx
<div className={styles.wrapper}> {/* Extra wrapper for hit target */}
  <a className={styles.link}>Link</a>
</div>
```

**Pass:**
```css
.link {
  position: relative;
}

.link::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
}
```

### View Transitions Rules

#### `transition-name-required`
Elements participating in view transitions need view-transition-name.

**Fail:**
```ts
document.startViewTransition(() => {
  // No view-transition-name assigned
  targetImg.src = newSrc;
});
```

**Pass:**
```ts
sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  sourceImg.style.viewTransitionName = "";
  targetImg.style.viewTransitionName = "card";
});
```

#### `transition-name-unique`
Each view-transition-name must be unique on the page during transition.

**Fail:**
```css
.card {
  view-transition-name: card;
}
/* Multiple cards with same name */
```

**Pass:**
```ts
// Assign unique name only to transitioning element
element.style.viewTransitionName = `card-${id}`;
```

#### `transition-name-cleanup`
Remove view-transition-name after transition completes.

**Fail:**
```ts
sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  targetImg.style.viewTransitionName = "card";
});
// sourceImg still has name, causes conflict on next transition
```

**Pass:**
```ts
sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  sourceImg.style.viewTransitionName = "";
  targetImg.style.viewTransitionName = "card";
});
```

#### `transition-over-js-li