CSSでａタグのリンク種類によるアイコンを付ける

afterのcontentは、Fontawesome5 freeを使用

• 外部リンク
  

  a[target="_blank"]:after { content: "\f35d";}

• PDFファイル
  

  a[href$=".pdf"]:after { content: "\f1c1";}

• ページ内リンク
  

  a[href^="#"]:after { content: "\f063";}

参照：Designers MARUKINAD様　https://www.marukin-ad.co.jp/marulog/?p=3697

ついでに、contentの中の最後に半角スペースを入れたいとき　\00a0　を入れる。
white-space:pre-wrap を指定した後の、「半角スペース」を入れるなどの方法もあるが、最後の半角スペースは効かなかった。

::before ::after のz-indexが効かない問題

::before等でz-indexが効かない場合、背面に入れる場合は、z-index:-1を使用する。
ただし、bodyとその要素の間に、backgroundがある場合、見えなくなるので、bodyにもz-index:0を入れる必要がある。

→ 見えない時は、その要素を含んでいる物全てに、適正なz-indexを入れてみる

ホームページ制作用部品のコード公開サイト

ホームページ部品がたくさん揃っています
https://webparts.cman.jp/