[CSS]:befor や :after 擬似要素を活用する

擬似要素:befor は何かの前に何かを表示する事ができます。擬似要素 :after は何かの後ろに何かを表示する事ができます。

htmlでリンクにアイコンを付けたりすると、ソースコードがゴチャゴチャしますし、その都度書くのも面倒ですよね？CSSで表示されるようにしちゃいましょう。便利な:befor　、:afterの使い方をご紹介します。

ソースが汚れるのを防ぐだけでなく、工夫次第ではhtmlには表示されないので、検索エンジンにインデックスさせずに何か表示する事もできます。

なお、CSS2では「:after」でしたが、CSS3で「::after」に変更されたそうです。

擬似要素でアイコン画像を付ける

a::after {
   content: url(image/web.jpg);
}

画像のパス、画像の名前は任意です。ご自分の状況で修正して下さい。それから画像の位置を必要に応じて調整をして下さいね。

擬似要素でFont Awesomeのアイコンを付ける

あわせて読みたい

Font Awesome The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

このサイトの記事のタイトルに付いている はこの方法で表示させています。

.entry-title::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";  
    padding-right: 6px;

擬似要素でテキストを表示する

content: “ここに入れた文字”;　が表示されます。

 dt::before {
    content: "おすすめ！";
    color:red;
    }

必須項目に*を付けたり

dt.must::after { /*class="must"とした場合*/
   content:"*";
   color:red;
}

擬似要素でテキストを表示する 応用編

CSSで表示しているので、html上には出力されません。なので、検索上どうでも良い様なキャッチコピーとかデザインとして表示させたいと時に使えます。

<h1 class="coco ">ココッティ―</h1>

.coco {
    text-align: center; 
}

.coco::before{
  content: 'Cocotiie';
  font-size:200%;
  display: block; /*改行*/
}

html上は「ココッティ―」だけしか出力されません。

display: block;で改行する件で参考にさせて頂きました。

blockは改行が入り、縦に重なると。分かりやすかったです。

サルワカ | サルでも分かる図解説…

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ CSSの難関「display」プロパティについて初心者でも分かるように丁寧に解説します。inline、block、inline-block、noneとは？違いは？