Analyzes CSS pseudo-elements and View Transitions API to enforce best practices for decorative layers, hover effects, and page transitions with precise file:line reporting.
Audit CSS for pseudo-element best practices and View Transitions API usage. Use when reviewing hover effects, decorative layers, or page transitions. Outputs file:line findings.
Overview
# Pseudo Elements
Review CSS and JavaScript for pseudo-element best practices and View Transitions API usage.
How It Works
Read the specified files (or prompt user for files/pattern)
Check against all rules below
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
{/ Unnecessary DOM node /}
Click me
```
Pass:
```tsx
Click me
```
```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.
|