「::before」と「:before」の違いは、
同じ「擬似要素」で、現在も両方使えるようになってますが、
「擬似クラス」との判別を明確化することを目的に、「CSS2」に、「:before」が導入されていましたが、「CSS3」で、「擬似クラス」に「::before」が導入されました。

・「::before」は、「CSS3」で導入
・「:before」は、「CSS2」で導入

「擬似要素」と「擬似クラス」は同じ「:」で要素に追加する形で、「CSS」に記述するようになっていますが、正確には、同じものではないので、判別をしやすくするために、擬似要素を「::」で区切るようになりました。

「擬似要素」と「擬似クラス」の違い

「擬似要素」と「擬似クラス」は、「CSSスタイル」を適用する対象が異なります。
「擬似要素」は、要素の一部分に対して「CSSスタイル」を適用することができ、
「擬似クラス」は、要素の状態に応じて、「CSSスタイル」を適用するためのものです。

「擬似要素」の「::before」は、要素の前にコンテンツを追加し、CSSスタイルを追加することができる「擬似要素」で、要素の前という一部分に関する変更が可能です。

「擬似クラス」の「:hover」「:visited」などは、「a」タグで囲まれた他のページにリンクを作成する要素に、マウスを重ねたり、リンクを訪れたりした場合に「CSSスタイル」を適用するために使用されます。
リンクにマウスを重ねた状態のときに、文字の色やサイズなどが変わるのは、「:hover」でCSSスタイルを適用している内容で、
リンクをクリックして訪れた後、リンクの色が変わって訪問したことをわかるのは、「:visited」でCSSスタイルを適用しているからです。

Back

疑似要素「::before」の記述方法

.クラス名:before{
content: '先頭に表示したいマーク';
display: inline-block;
transform: scale(0.5（横幅）,2（縦幅）);
}

「content」プロパティ

「content」プロパティは、表示したい内容を文章やマークで指定するプロパティ。

記述例
content: '先頭に表示したいマーク';
content: '■';
content: '♥';
content: '&hearts;';
content: '♥';

「♥」と「&hearts;」と「♥」は、同じ「♥」マークを表す内容です。
HTMLの特殊文字は、文字列コードが割り当てられているので、
その文字を記述することで、マークを表示できます。
ブラウザは、文字列コードに対応しているので、
文字変換で使用できるPCだけのマークを使用して表示されないという危険性を予防できます。

ネットで「HTML 特殊文字一覧」と検索すると、簡単に出てきます。

「display」プロパティ

「display」プロパティは、コンテンツ内容の形を指定するのに、指定できる「inline-block」にタイプを変更するプロパティ。
「display」プロパティは、コンテンツのタイプを変更するためのプロパティです。
HMTL要素には、「インライン要素」と「ブロック要素」という特性に分かれていて、
それぞれの要素には特徴があるので、サイズを変更するには、「ブロック要素」に変更する必要がありました。
「inline-block」は、「インライン要素」に「ブロック要素」の特徴を加えることができるので、
「inline-block」を指定することで、「transform」プロパティが使用できるようになります。

詳しくは、「CSS　display　使い方」と検索すると、色々なページがたくさん出てきます。

「transform」プロパティ

transform＝コンテンツ内容の形を変形させるプロパティ。「scale」で縦横サイズを変更できる。

記述例
transform: scale(横幅,縦幅);
transform: scale(0.5,2);

「scale」以外にも色々な変形形式を選択できる。
詳しくは、「transform」プロパティを調べるとわかります。

Back