在链接指向文件类型之前或之后放置图标的最佳做法是什么（例如：链接Adobe PDF，音频或视频） [英] What's the best practice(s) to place an icon before or after links to indicate file type (ex: linking Adobe PDF, audio or video)

问题描述

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

我建议使用CSS，在上面放置一个类，然后使用：after创建一个元素。

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

如果链接在无序列表中，我知道图标图像可以用来替换项目符号，但我不确定段落或其他HTML元素。

解决方案

你可以使用伪类之前或之后，我认为这将是一种方法，

通过在您的链接中添加一些额外的填充并输入背景图片，您不需要添加类，因为您可以使用 substring属性选择器通过其扩展名选择（目标）链接。

/ p>

  a [href $ ='。pdf'] {
 background：transparent url（pdf-icon.gif）center右无重复; 
 padding-right：20px; 
} 
  

使用属性选择器也适用于之前或：之后生成的元素，这些你可以做一个内联块大到足以包含图像作为背景。 / p>

例如

  a [href $ ='。pdf']：之后{
 content：url（pdf-icon.gif）; 
 margin-left：4px; 
 display：inline-block; 
 width：12px; 
 height：12px; 
} 
  

查看此页了解详情

My team was debating what the best practice would be for wanting to insert an icon after links to the various media file types we have on our site. Examples would be linking to a PDF and wanting to insert an icon image to let users know it's a PDF. The same could be used for video or audio files.

I suggested using CSS, putting a class on the and using :after to create an element.

I recall IE6 and IE7 won't support the pseudo CSS class, but aside from that, would there be a better practice?

If the links were in an unordered list, I know the icon image could be used to replace a bullet character, but I wasn't sure about paragraphs or other HTML elements.

解决方案

You can use before or after pseudo classes and I think that would be one way to go,

However you could just do it by adding a bit of extra padding to your link and inputting a background image, and you shouldn't need to add classes either as you can use substring attribute selectors to select (target) the links via their extension..

e.g.

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

using the attribute selector would also work for your :before or :after generated elements too, and these you could make into an inline-block big enough to contain the image as a background too.

e.g.

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

check out this page for more explanation

这篇关于在链接指向文件类型之前或之后放置图标的最佳做法是什么（例如：链接Adobe PDF，音频或视频）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！