CSSにおける`::before`と`::after`擬似要素 - 完全ガイド

CSSの疑似要素 `::before` と `::after` は、選択された要素の前または後にコンテンツを挿入します。これらはレンダリングするために `content` プロパティを必要とし、文字列、画像URL、またはUnicode文字を受け入れます。疑似要素は、DOMに追加されたかのように動作しますが、実際にはDOMの一部ではありません。これにより、要素の特定の部分をスタイルすることができます。これらは親要素の中に表示されるため、空の要素ではなく、コンテナ要素に適しています（コンテナでラップされていない場合を除く）。これらは、ホバーエフェクトや見た目の改善に役立ちます。`attr()` 関数は、要素から属性値を取得し、これらの疑似要素のコンテンツ内で使用できるようにします。これらが重なった場合、デフォルトでは `::after` が上に表示されますが、z-indexを使用して変更できます。これらの要素はDOMツリーの一部ではないため、アクセシビリティの問題から、重要なコンテンツには使用しないでください。デフォルトでは、インライン要素です。