こんにちは！ あますた(@amaguristar)です。

• 「サイトでファイルをダウンロードさせたい時に拡張子で表示するアイコンや文字を変えたい」

そんな時ありませんか？ 属性セレクタを使用すると簡単に作成可能です。

　

cssの設定で簡単に対応

今回は試しにリンク先がpdfファイルだった時に下記アイコンをリンクの先頭に表示する様に設定します。

css編集

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

上記cssを適用すると、

ダウンロード >> sample.pdf

この様にiconが表示される様になります。

自分の場合はアイコンのサイズを指定したいので直接幅と高さを指定しましたが、文字のサイズに合わせて表示したい場合は単純に、

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

ダウンロード >> sample.pdf

と文字の２倍位のサイズになる様に設定した方が、何かと楽だと思います。

まとめ

リンクでファイル形式を判断する場合は、

a[href$="拡張子"]        例) a[href$=".pdf"]

セレクタを使用して判断する。

判断したファイルで画像を表示する場合は、

a[href$="拡張子"]::before
a[href$="拡張子"]::after

を設定する。