疑似要素・疑似クラスについて

疑似要素...特定の文字の前や後ろに文字を付け加えたり、最初の文字だけを大きくして色を変えたりすることができます。

追加で何か付け加えたいものがあればこの擬似要素を使うと良いということですね。

擬似要素は「::」を記載します。

疑似クラス...特定の文字に特定の文字にカーソルを合わせるとカーソルを合わせた時だけ文字の色が変わったり、訪問済や未訪問、カーソルを合わせた時に文字の色を変えることができる。

ユーザーの動きに合わせてデザインを変化させることができます。

疑似クラスは「:」を記載します。

①疑似要素::before

::beforeは対象の文字の前半に疑似的要素を付け加えたい場合に入力します。
文字だけでなく、記号も加えることができます。

html

<div>
  <p>後ろの文章</p>
</div>

css

div p::before{
　content:"前の文章";
　color:red;
}

②疑似要素::after

::afterは対象の文字の後半に疑似的要素を付け加えたい場合にセレクタに入力します。
::beforeの時同様、文字だけでなく、記号も加えることができます。

html

<div>
  <p>前の文章</p>
</div>

css

div p::after{
　content:"後の文章";
　color:red;
}

③疑似要素::first-letter

::first-letterは、対象の最初の文字だけを大きくしたり、色を変えたりすることができます。

html

<div>
　<p>最初の文字だけが大きくなり緑で表示されます。</p>
</div>

css

div p::first-letter{ 
font-size:70px; 
color:green; 
}

④疑似クラス:link

:linkは一度も訪れたことのないリンクに対して色を変えるなど、スタイルを指定できます。
ちなみに初期値では青色です。

html

<div>
  <p><a href="#">一度も訪れたことないのリンクの色を赤にします。</a></p>
</div>

css

a:link{ 
color:red;
}

⑤疑似クラス:visited

:visitedは訪問済みのリンクに対してスタイルを指定できます。※初期値では紫色です。

html

<div>
　<p><a href="#">訪問済みのリンクの色をオレンジにします。</a></p>
</div>

css

a:visited{ 
color:orange; 
}

⑥疑似クラス:hover

:hoverはカーソルを乗せた状態の要素に対して背景を変えたり、スタイルを指定できます。

html

<div>
　<p><a href="#">カーソルを乗せた状態でバックが青色になります。</a></p>
</div>

css

a:hover{ 
background:blue; 
}