- HOME
- > BLOG CATEGORY
- 【CSS】特定のファイルへのリンクだけにアイコンを指定しよう!

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
今回は、PDFファイルやZIPファイルなどといった特定のファイルのみにアイコンを指定
する解説になります。
イメージは下記のようになります。
属性セレクタ + ::after
を指定し、要素の「直後」にアイコン指定します。
補足:::before
は、要素の「直前」になります。
今回、指定する属性セレクタは、次のような記述方法になります。
[href$=".pdf"]
このように、「属性$=”値”」の形になります。
上記の記述方法は、拡張子が「.pdf」のときだけにCSSが適用されるようになっています。
拡張子が「.zip」の場合は[href$=".zip"]
と指定します。
書き方は以下のようになります。
属性セレクタについて
<ul>
<li>after... <a href="sample.pdf">資料...</a></li>
<li>before... <a href="sample.pdf">資料...</a></li>
<li>border... <a href="cssboder/">詳細...</a></li>
</ul>
/*--一部省略しております--*/
a[href$=".pdf"] {
color: #FD6158;
text-decoration: none;
background-color: #fff;
padding: 1em 1.4em;
border: solid 1px #FD6158;
border-radius: 5px;
}
ul.file-list li a:hover[href$=".pdf"] {
color: #fff;
background: #E09694;
}
a[href$=".pdf"]::after {
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background: url(pdf-icon.png);
background-size: 20px 20px;
margin-left: .5em;
}
a[href$=".pdf"]
には、文字色、背景色、ボーターなど、リンクに対してCSSを記述しております。
a[href$=".pdf"]::after
とは、「資料のダウンロードはコチラ」の直後にアイコンを指定しております。
ポイント!
background: url
に画像を指定する際には、contentの中には何も記述しないようにしましょう。
content: ''
← この状態にしておきましょう。
また、サイズを変更する際には、display: inline-block
を指定してからサイズの指定をしましょう。
上記で解説したように、「.pdf」ファイルが指定されている場合はアイコンが表示され、
それ以外は、通常のリンクとして表示します。
毎回、HTMLに「pdf」のアイコンをimgタグで指定するよりかはCSSで指定した方が楽ですよね。
主にファイル(pdf、画像)をダウンロードする際に指定をおこないます。
今回はこれで以上です。
::after
を指定し、要素の「直後」にアイコン指定します。[href$=".pdf"]
このように、「属性$=”値”」の形になります。background: url
に画像を指定する際には、contentの中には何も記述しないようにしましょう。display: inline-block
を指定してからサイズの指定をしましょう。2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog