CSSの`::before`と` ::after`は、特定のHTML要素の前後に仮想的な要素を追加するためのもので、**擬似要素**と呼ばれます。ページの見た目を装飾するためによく使われます。例えば、文章の前に特定のアイコンを表示したり、文章の後ろに追加の情報を表示したりすることができます。これらの仮想的な要素は、実際のHTMLコードには存在しないので、直接HTMLからは見ることができません。しかし、CSSからは操作することができます。 ## 例1: コンテンツの追加 `::before`と`::after`を使用することで、要素の前後にテキストや画像などのコンテンツを追加することができます。 ~~~html-preview

【この前後にテキストが入ります】

~~~ ## 例2: 装飾の追加 `::before`と`::after`を使用することで、要素に装飾を追加することができます。 ~~~html-preview ~~~ ## ::beforeと::afterの注意点 - `::before`と`::after`は、`content`プロパティを必ず指定する必要があります。指定する文章がない場合、`content: '';`のようにクオートのみで記述します。 - `::before`と`::after`は、`position`プロパティを指定することで要素の位置を調整することができます。

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}::before, ::after

クイズにチャレンジしよう！

コーディングにチャレンジしよう！

::before, ::after