pseudo-elements
✓現代 CSS 偽元素，無需額外的 DOM 節點即可進行樣式設計。在實現視圖轉換、添加裝飾層或設置本機瀏覽器 UI 樣式時使用。觸發涉及 ::before、::after、視圖轉換、背景樣式或減少視覺效果 JavaScript 的任務。
SKILL.md
Modern CSS pseudo-elements provide direct styling hooks into browser-native features—dialogs, popovers, view transitions—reducing the need for JavaScript. Sometimes you don't need to install a library; the browser has you covered.
| ::before / ::after | Decorative layers, icons, hit targets | | ::view-transition-group(name) | Control view transition animations | | ::view-transition-old(name) | Style the outgoing snapshot | | ::view-transition-new(name) | Style the incoming snapshot | | ::backdrop | Style dialog/popover backdrops | | ::placeholder | Style input placeholders |
Create anonymous inline elements as first/last child. Require content to render.
現代 CSS 偽元素，無需額外的 DOM 節點即可進行樣式設計。在實現視圖轉換、添加裝飾層或設置本機瀏覽器 UI 樣式時使用。觸發涉及 ::before、::after、視圖轉換、背景樣式或減少視覺效果 JavaScript 的任務。 來源：raphaelsalaja/userinterface-wiki。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill pseudo-elements- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 pseudo-elements？
現代 CSS 偽元素，無需額外的 DOM 節點即可進行樣式設計。在實現視圖轉換、添加裝飾層或設置本機瀏覽器 UI 樣式時使用。觸發涉及 ::before、::after、視圖轉換、背景樣式或減少視覺效果 JavaScript 的任務。 來源：raphaelsalaja/userinterface-wiki。
如何安裝 pseudo-elements？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill pseudo-elements 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/raphaelsalaja/userinterface-wiki
詳情
- 分類
- *創意媒體
- 來源
- skills.sh
- 收錄時間
- 2026-02-01