CSS伪元素最佳实践与视图过渡API检查工具 - 提升前端代码质量

pseudo-elements by raphaelsalaja/userinterface-wiki

139 周安装量

686 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill pseudo-elements

CSS 代码质量前端架构

🇨🇳中文介绍

伪元素

审查 CSS 和 JavaScript 中关于伪元素的最佳实践以及视图过渡 API 的使用情况。

工作原理

读取指定的文件（或提示用户输入文件/模式）
根据以下所有规则进行检查
以 文件:行号 格式输出检查结果

规则类别

优先级	类别	前缀
1	Before/After	`pseudo-`
2	视图过渡	`transition-`
3	原生样式	`native-`

规则

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

测试策略完整指南：单元/集成/E2E测试金字塔与自动化实践

11,200 周安装

响应式设计教程：移动优先CSS布局、Flexbox/Grid与图像优化实战指南

11,200 周安装

代码库搜索技能指南：精准查找函数、追踪依赖、理解架构与定位错误

10,900 周安装

`pseudo-content-required`

::before 和 ::after 需要 content 属性才能渲染。

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

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

`pseudo-over-dom-node`

使用伪元素来添加装饰性内容，而不是额外的 DOM 节点。

<button className={styles.button}>
  <span className={styles.background} /> {/* 不必要的 DOM 节点 */}
  Click me
</button>

<button className={styles.button}>
  Click me
</button>



.button::before {
  content: "";
  /* 装饰性背景 */
}

`pseudo-position-relative-parent`

父元素必须具有 position: relative，以便绝对定位的伪元素正常工作。

.button::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* .button 没有 position 属性 */

.button {
  position: relative;
}

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

`pseudo-z-index-layering`

伪元素需要 z-index 才能与内容正确分层。

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gray-3);
}
/* 覆盖了按钮文字 */

.button {
  position: relative;
  z-index: 1;
}

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

`pseudo-hit-target-expansion`

使用负的 inset 值来扩大点击目标区域，无需额外的标记。

<div className={styles.wrapper}> {/* 用于点击目标的额外包装器 */}
  <a className={styles.link}>Link</a>
</div>

.link {
  position: relative;
}

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

`transition-name-required`

参与视图过渡的元素需要设置 view-transition-name。

document.startViewTransition(() => {
  // 未分配 view-transition-name
  targetImg.src = newSrc;
});

sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  sourceImg.style.viewTransitionName = "";
  targetImg.style.viewTransitionName = "card";
});

`transition-name-unique`

在过渡期间，页面上的每个 view-transition-name 必须是唯一的。

.card {
  view-transition-name: card;
}
/* 多个卡片使用了相同的名称 */

// 仅对正在过渡的元素分配唯一名称
element.style.viewTransitionName = `card-${id}`;

`transition-name-cleanup`

在过渡完成后移除 view-transition-name。

sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  targetImg.style.viewTransitionName = "card";
});
// sourceImg 仍然保留名称，会导致下一次过渡冲突

sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  sourceImg.style.viewTransitionName = "";
  targetImg.style.viewTransitionName = "card";
});

`transition-over-js-library`

对于页面过渡，优先使用视图过渡 API 而非 JavaScript 动画库。

import { motion } from "motion/react";

function ImageLightbox() {
  return (
    <motion.img layoutId="hero" /> // 基于 JS 的共享元素过渡
  );
}

function openLightbox(img: HTMLImageElement) {
  img.style.viewTransitionName = "hero";
  document.startViewTransition(() => {
    // 原生浏览器过渡
  });
}

`transition-style-pseudo-elements`

为自定义动画设置视图过渡伪元素的样式。

document.startViewTransition(() => { /* ... */ });
// 使用默认的交叉淡入淡出效果

::view-transition-group(card) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

`native-backdrop-styling`

使用 ::backdrop 伪元素来设置对话框/弹出框的背景。

<>
  <div className={styles.overlay} onClick={close} />
  <dialog className={styles.dialog}>{children}</dialog>
</>

dialog::backdrop {
  background: var(--black-a6);
  backdrop-filter: blur(4px);
}

`native-placeholder-styling`

使用 ::placeholder 来设置输入框占位符的样式，而不是使用包装元素。

<div className={styles.inputWrapper}>
  {!value && <span className={styles.placeholder}>Enter text...</span>}
  <input value={value} />
</div>

input::placeholder {
  color: var(--gray-9);
  opacity: 1;
}

`native-selection-styling`

使用 ::selection 来设置文本选中区域的样式。

::selection {
  background: var(--blue-a5);
  color: var(--gray-12);
}

审查文件时，按以下格式输出结果：

文件:行号 - [规则ID] 问题描述

示例：
components/button/styles.module.css:12 - [pseudo-content-required] ::before 缺少 content 属性
components/lightbox/index.tsx:45 - [transition-over-js-library] 使用 motion layoutId 而不是视图过渡 API

在检查结果之后，输出一个汇总：

规则	数量	严重程度
`pseudo-content-required`	2	高
`pseudo-over-dom-node`	1	中
`transition-name-cleanup`	1	中

🇺🇸English

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:

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

Pass:

.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:

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

Pass:

<button className={styles.button}>
  Click me
</button>



.button::before {
  content: "";
  /* decorative background */
}

`pseudo-position-relative-parent`

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

Fail:

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

Pass:

.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:

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

Pass:

.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:

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

Pass:

.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:

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

Pass:

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:

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

Pass:

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

`transition-name-cleanup`

Remove view-transition-name after transition completes.

Fail:

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

Pass:

sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => {
  sourceImg.style.viewTransitionName = "";
  targetImg.style.viewTransitionName = "card";
});

`transition-over-js-library`

Prefer View Transitions API over JavaScript animation libraries for page transitions.

Fail:

import { motion } from "motion/react";

function ImageLightbox() {
  return (
    <motion.img layoutId="hero" /> // JS-based shared element transition
  );
}

Pass:

function openLightbox(img: HTMLImageElement) {
  img.style.viewTransitionName = "hero";
  document.startViewTransition(() => {
    // Native browser transition
  });
}

`transition-style-pseudo-elements`

Style view transition pseudo-elements for custom animations.

Fail:

document.startViewTransition(() => { /* ... */ });
// Uses default crossfade

Pass:

::view-transition-group(card) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

Native Styling Rules

`native-backdrop-styling`

Use ::backdrop pseudo-element for dialog/popover backgrounds.

Fail:

<>
  <div className={styles.overlay} onClick={close} />
  <dialog className={styles.dialog}>{children}</dialog>
</>

Pass:

dialog::backdrop {
  background: var(--black-a6);
  backdrop-filter: blur(4px);
}

`native-placeholder-styling`

Use ::placeholder for input placeholder styling, not wrapper elements.

Fail:

<div className={styles.inputWrapper}>
  {!value && <span className={styles.placeholder}>Enter text...</span>}
  <input value={value} />
</div>

Pass:

input::placeholder {
  color: var(--gray-9);
  opacity: 1;
}

`native-selection-styling`

Use ::selection for text selection styling.

Pass:

::selection {
  background: var(--blue-a5);
  color: var(--gray-12);
}

Output Format

When reviewing files, output findings as:

file:line - [rule-id] description of issue

Example:
components/button/styles.module.css:12 - [pseudo-content-required] ::before missing content property
components/lightbox/index.tsx:45 - [transition-over-js-library] Using motion layoutId instead of View Transitions API

Summary Table

After findings, output a summary:

Rule	Count	Severity
`pseudo-content-required`	2	HIGH
`pseudo-over-dom-node`	1	MEDIUM
`transition-name-cleanup`	1	MEDIUM

References

Weekly Installs

139

Repository

raphaelsalaja/u…ace-wiki

GitHub Stars

641

First Seen

Jan 26, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode119

cursor115

codex112

claude-code107

gemini-cli106

github-copilot95

Flutter/Dart代码审查最佳实践：提升应用性能与质量的完整检查清单

945 周安装

CSS伪元素最佳实践与视图过渡API检查工具 - 提升前端代码质量

🇨🇳中文介绍

伪元素

工作原理

规则类别

规则

相关 Skills

Before/After 规则

pseudo-content-required

pseudo-over-dom-node

pseudo-position-relative-parent

pseudo-z-index-layering

pseudo-hit-target-expansion

视图过渡规则

transition-name-required

transition-name-unique

transition-name-cleanup

transition-over-js-library

transition-style-pseudo-elements

原生样式规则

native-backdrop-styling

native-placeholder-styling

native-selection-styling

输出格式

汇总表格

参考资料

🇺🇸English

Pseudo Elements

How It Works

Rule Categories

Rules

Before/After Rules

pseudo-content-required

pseudo-over-dom-node

pseudo-position-relative-parent

pseudo-z-index-layering

pseudo-hit-target-expansion

View Transitions Rules

transition-name-required

transition-name-unique

transition-name-cleanup

transition-over-js-library

transition-style-pseudo-elements

Native Styling Rules

native-backdrop-styling

native-placeholder-styling

native-selection-styling

Output Format

Summary Table

References

最新 Skills

`pseudo-content-required`

`pseudo-over-dom-node`

`pseudo-position-relative-parent`

`pseudo-z-index-layering`

`pseudo-hit-target-expansion`

`transition-name-required`

`transition-name-unique`

`transition-name-cleanup`

`transition-over-js-library`

`transition-style-pseudo-elements`

`native-backdrop-styling`

`native-placeholder-styling`

`native-selection-styling`

`pseudo-content-required`

`pseudo-over-dom-node`

`pseudo-position-relative-parent`

`pseudo-z-index-layering`

`pseudo-hit-target-expansion`

`transition-name-required`

`transition-name-unique`

`transition-name-cleanup`

`transition-over-js-library`

`transition-style-pseudo-elements`

`native-backdrop-styling`

`native-placeholder-styling`

`native-selection-styling`