文字超链接旁边怎么加上小箭头图标

许多知名网站都在文字链的右边加一个箭头图标，例如Google站长管理后台，Alexa官网等，这样设计的好处是让链接更醒目，更容易辨认。

文字链右边加一个箭头图标的方法，多数人是使用css背景图来实现，包括上面提到的Google站长管理后台，Alexa官网等。是的，这种方法最容易掌握和应用。这正是本文要介绍的实现方法。

先来看看效果图。

上图显示两个超链接样式，分别是两个不同的箭头图标，其实他们是一个背景图，我们可以通过css实现在文字链右边自动添加这样的一个背景图。

css代码如下：

关键代码是 background:url 这里，url是一个图片地址。上述css代码，url使用的是一个箭头图标的base64字符串，（参考：怎么把图片转换成base64字符串），这样的好处是不用再去请求图片，节省时间，提交效率。

下面是html关键代码：

上述html代码看到，其实我们无需写任何额外代码，正常超链即可。这样的好处更在于，我们可以任何时候修改css代码，来设置超链的不同的样式，需不需要右边箭头图标，也可以在css里轻松搞定。

完整的html代码如下：