【CSS】::beforeなどの疑似要素について

疑似要素

CSSで要素の特定の部分や位置にスタイルを適用するための仮想的な要素。
実際のHTML文書内には存在しないため、疑似という名がついている。
CSSを使用してページ内の特定要素に共通なコンテンツやスタイルを挿入するために利用される。

なお、インラインスタイル属性（<p style="hoge fuga"）には疑似要素を指定できない。

例）

• ::before: 要素の最初の子要素としてコンテンツを挿入する。
• ::after: 要素の最後の子要素としてコンテンツを挿入する。
• ::first-line: 要素の最初の行にスタイルを適用する。
• ::first-letter: 要素の最初の文字にスタイルを適用する。

::beforeについて

例として、::beforeについて解説する。 CSSの::beforeは、疑似要素（pseudo-element）の1つで、指定した要素の最初の子要素としてコンテンツを挿入するために使用される。
テキストやアイコンなどの追加のコンテンツを挿入するために利用される。

例えば、以下のように::beforeを使用して、段落要素（<p>）の前にアイコンを挿入することができる。

p::before {
  content: "\2022";  /* Unicodeで黒い丸（●）のコードポイント */
  margin-right: 8px;  /* アイコンとテキストの間にスペースを追加 */
}

::beforeにはcontentプロパティが必要で、これは表示するコンテンツを指定する。
他にもスタイルや配置に関するプロパティも使用できる。

当ブログのメッセージ系エリアにも使用している。

"メッセージエリア"

この例では以下のようなCSSを当てている。

msgboxCheck {
    display: block;
    background: #e3f7df;
    padding: 16px;
    border-radius: 8px;
    margin: 6px 0 12px 0;
    
    &::before {
        content: "\f058";
        color: #55c500;
        font-weight: 900;
        margin-right: 8px;
        font-size: 18px;
        font-family: "Font Awesome 6 Free";
    }
}

疑似クラス

疑似要素と混同しがちな概念に擬似クラスがある。
擬似クラス（Pseudo-classes）は、要素の状態や位置に基づいてスタイルを適用するために使用されるCSSの概念のこと。
こちらはコロン（:）が一つで、:hoverなどが代表的。

例）

• :hover: マウスが要素の上にホバーされているときにスタイルを適用する。
• :active: 要素がアクティブ（クリックされている）ときにスタイルを適用する。
• :visited: リンクが既に訪れたことがある場合にスタイルを適用する。
• :focus: 要素がフォーカスを受けているときにスタイルを適用する。主にフォーム要素に使用される。
• :nth-child(): 要素が親要素内で何番目の子要素であるかに基づいてスタイルを適用する。
• :nth-of-type(): 要素が親要素内で同じ種類の要素として何番目であるかに基づいてスタイルを適用する。
• :not(): ()内で指定したセレクタと一致しない要素にスタイルを適用する。