今回は擬似要素について紹介します。
擬似要素を使えるようになると表現の幅が一気に広がりますよ。

擬似要素とは？

セレクタ::擬似要素 {
    プロパティ:値;
}
 

擬似要素は、文章の１文字目や１行目など要素内の一部に対してスタイルを指定したり、
HTMLには書かれてない文字や画像をCSSから追加したりすることができます。
使用する際には、セレクタと擬似要素の間に「:(コロン)」を「2つ」入れて繋ぎます。

注意点

注意点として、擬似クラスはセレクタと擬似要素の間に、
「:(コロン)」を「1つ」しかいれないので間違えないように気を付けましょう。

擬似要素のメリット

HTMLを汚さずに様々な表現をさせることができることです。
CSSの為だけにHTMLに意味のないタグを書くことはあまり推奨されていません。
なのでSEO(検索エンジン最適化)の評価が下がってしまう恐れがあります。
ですが、擬似要素をブラウザは要素として見ない為、SEOを気にせずに表現ができます。

架空の要素を作り出す「::before、::after」

See the Pen pKWQRw by kiharaneko (@kiharaneko) on CodePen.

「::before、::after」を使うと、HTMLには書かれていない文字や画像などの
架空の内容をCSSから挿入することができます。

::beforeは、要素の「直前」に内容を挿入し、
::afterは、要素の「直後」に内容を挿入します。

使用する際は、
「content: "挿入したい内容";」を必ず入れます。
ちなみに、内容を囲うのに使うのは、
「"(ダブルクォート)」でも「'(シングルクォート)」でも
どちらでもかまいません。

::before、::afterの使い道

ただ文字や画像を入れるだけならばHTMLに書けばいいだけなのですが、
リストのアイコンをオリジナルの物に変えたりしたい場合などによく使用されます。
グラデーションのborderを作ったりにも使用されたりします。
(borderの色は通常グラデーション不可)
他にも様々な表現に使われるので詳しく知りたい方はググってみてね♪

また、文字や画像などは何も入れずに、
CSSで装飾するための架空の要素として使うときは、
「content: "";」を入れましょう。
これを入れないと、beforeやafterが表示されませんので注意。

最初の文字にスタイルを適用する「:first-letter」

See the Pen RJLqMN by kiharaneko (@kiharaneko) on CodePen.

::first-letterは、ブロック要素の最初の文字を対象にスタイルを適用します。
インライン要素には適用できないので注意しましょう。

最初の文字にスタイルを適用する「::first-line」

See the Pen qKPQov by kiharaneko (@kiharaneko) on CodePen.

::first-lineは、ブロック要素の最初の行を対象にスタイルを適用します。
インライン要素には適用できないので注意しましょう。