用css实现文本超链文字右边加一个箭头图标

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

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

先来看看效果图。

.content{ width:600px; margin:30px 30px 30px 30px; font-family:”Microsoft Yahei”,Georgia,”Times New Roman”,Times,serif; font-size:14px; color:#333; line-height:185%;}.content a {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; padding-right:13px; margin-left:3px; margin-right:3px; text-decoration: underline; color: #c30;}.content a:hover { color: blue;}

超链接样式一
html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，p+css实现的下拉菜单便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。