dludlowの答えは技術的にはあなたが求めていたものですが、Razorで何か違うことをする必要なく、純粋なCSS3で求めていることを実行できるという別の提案を投稿したかった.
これは、私が何を意味するかを示すために私がつかんだもののほんの一部のサンプルです:
#sample-div a {
display:inline-block;
padding-left:20px;
line-height:18px;
}
#sample-div a[href$='.jpg'],
#sample-div a[href$='.jpeg'],
#sample-div a[href$='.gif'],
#sample-div a[href$='.psd'] {
background:transparent url(/images/icon_image.png) center left no-repeat;
}
#sample-div a[href$='.csv'],
#sample-div a[href$='.xls'],
#sample-div a[href$='.xlsx'],
#sample-div a[href$='.xlw'] {
background:transparent url(/images/icon_excel.png) center left no-repeat;
}
#sample-div a[href$='.pdf'] {
background:transparent url(/images/icon_acrobat.png) center left no-repeat;
}
#sample-div a[href$='.ppt'],
#sample-div a[href$='.pps'] {
background:transparent url(/images/icon_powerpoint.png) center left no-repeat;
}
#sample-div a[href$='.doc'],
#sample-div a[href$='.docx'],
#sample-div a[href$='.rtf'],
#sample-div a[href$='.txt'],
#sample-div a[href$='.wps'] {
background:transparent url(/images/icon_word.png) center left no-repeat;
}
もちろん、これを改善する方法は他にもあります。たとえば、拡張機能を追加したり、個々の画像の代わりにスプライトマップを使用したり (これをお勧めします)、background
省略形のルールを単にbackground-image
.
頑張ってください!頑張ってください!