📝
【CSS】疑似要素って何？
はじめに
課題のdiv puzzle作成中、疑似要素・疑似クラスを使いました。その際、「…疑似要素？疑似クラス？」とはてながいっぱい…。ということで、頭がパンクする前にまとめておきたいと思います。まずは疑似要素から。
疑似要素について
疑似要素とは？
疑似要素とは、要素の一部に対してスタイルを適用できる指定方法です。HTMLの要素を追加することなく、"要素もどき"をCSSで作ることができます。タグを使わずにCSSで「要素」っぽい処理を行うことを、「疑似要素」といいます。
コロンの数について
CSS3では「:」コロンを2つ書く決まりとなっています。CSS2まではコロンは1つでしたが、疑似クラスと見分けるためにCSS3から2つになりました。
種類と活用法
今回よく使用される4つの擬似要素を紹介します。
1. ::before【要素の直前に内容を追加する】
2. ::after【要素の直後に内容を追加する】
::beforeと::afterには必ずcontentプロパティが必要で、colorやfont-size等のプロパティは追加する内容に適用されます。
3. ::first-line【要素の1行目に内容を適用する】
4. ::first-letter【要素の１文字目に内容を適用する】
まとめ
活用方法によっては色々な表現ができそうです。より良いコーディングができるように、また、幅広いデザインができるように身につけておきたいですね。
Discussion