在链接之前或之后放置图标以指示文件类型的最佳做法是什么(例如:链接Adobe PDF,音频或视频)

Question

我的团队正在讨论在链接到我们网站上的各种媒体文件类型之后想要插入图标的最佳做法.示例将链接到PDF并希望插入图标图像以让用户知道它是PDF.这同样可以用于视频或音频文件.

我建议使用CSS,将一个类放在并使用:after之后创建一个元素.

我记得IE6和IE7不支持伪CSS类,但除此之外,还有更好的做法吗？

如果链接在无序列表中,我知道图标图像可用于替换子弹字符,但我不确定段落或其他HTML元素.

Answer 1

您可以在伪类之前或之后使用,我认为这是一种方法,

但是,您可以通过向链接添加一些额外的填充并输入背景图像来实现,并且您不需要添加类,因为您可以使用子字符串属性选择器通过其扩展名选择(目标)链接. .

例如

a[href$='.pdf'] {
  background: transparent url(pdf-icon.gif) center right no-repeat;
  padding-right: 20px;
}

使用属性选择器也适用于您:before或:after生成的元素,这些可以制作成足够大的内联块,以便将图像也包含在背景中.

例如

a[href$='.pdf']:after {
   content: url(pdf-icon.gif);
   margin-left: 4px;
   display: inline-block;
   width: 12px;
   height: 12px;
}

查看此页面以获取更多解释

Answer 2

我还会坚持使用 CSS 伪元素，对旧浏览器有很好的降级效果。恕我直言，使用 IE <= v7 的人不想看到漂亮的网站\xe2\x80\x93，您也可以通过阅读状态栏来识别链接的文件类型。

\n