pseudo-elements

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.

追加の DOM ノードを使用せずにスタイルを設定できる最新の CSS 擬似要素。ビューの遷移を実装する場合、装飾レイヤーを追加する場合、またはネイティブ ブラウザー UI をスタイル設定する場合に使用します。 ::before、::after、ビュー遷移、背景スタイル、または視覚効果のための JavaScript の削減を含むタスクをトリガーします。 ソース: raphaelsalaja/userinterface-wiki。

原文を見る