疑似要素

要素の一部に対して影響を与えるのが擬似要素。：（コロン）は2つつけます。 参考　→　疑似要素 (Pseudo-elements) - CSS: カスケーディングスタイルシート | MDN

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection

疑似クラス

参考　→　疑似クラス - CSS: カスケーディングスタイルシート | MDN

擬似クラスは指定したもの全体に影響を与えるもの。 文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です。（マウスホバー時とかは文書構造の範囲外ですし、単体セレクタだけでは取れない）

• :link
• :visited
• :active
• :hover
• :focus
• :lang
• :target
• :root
• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty
• :not
• :enabled
• :checked

疑似要素を使って、見出しなどをつける方法

疑似要素を特に使うのがbefore/afterです。 たとえば、h3の見出しに、分かりやすいよう先頭に〇を付けたいとき、次のように記述します。

CSS

     
	  h3 {    
		  font-size: 150%;    
		  padding-left: 0.5em;    
		  letter-spacing: 0.03em;    
		  position:relative;    
	  }

	  h3::before {
		  content: '';
		  position: absolute;
		  bottom: 0;    
		  left: -20px;
		  background-color: #786ae2;
		  width: 44px;
		  height: 44px;    
		  border-radius: 30px;    
	  }
	
    

ここでのポイントは、

• position:relative; を疑似要素をつける要素に指定しておくこと
• content: '';　を必ず指定すること
• width/ heightを指定すること

これらを指定しないと、疑似要素が表示されないので、ご注意ください！ また、position: absolute; では、top(bottom)/ left(right) を必ず指定しましょう。