您的位置：首页 > Web前端 > CSS

如何在链接右边添加一个示意图标来达到对用户更友好的交互

2018-03-07 15:15 316 查看

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
a[href $='.pdf'] {
padding-right: 20px;
background: transparent url(http://www.iconpng.com/png/lozengue-filetype/pdf.png) no-repeat right;
background-size: contain;
}
</style>
<body>
<a href="godkun.pdf">pdf文件</a>
</body>
</html>

示意图如下:

对background进行分析:

transparent

是指背景颜色设置为透明色

背景

url

图片是默认填的区域大小为

width

的值，如果是边框盒模型，就是包括

padding

和

border

no-repeat

是不重复图片来填充区域，只填充一个

right

是指填充在背景区域的最右侧

对

a[href $='.pdf']

进行分析：

href

指定

标签的链接类型

表示结束的位置，用于正则

$='.pdf'

是指匹配以

.pdf

结尾的

href

链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html

相关文章推荐

新的分享

章节导航