用css实现文本超链文字右边加一个箭头图标
程序员文章站
2022-05-09 07:55:16
...
许多知名网站都在文字链的右边加一个箭头图标，例如Google站长管理后台，Alexa官网等，这样设计的好处是让链接更醒目，更容易辨认。
文字链右边加一个箭头图标的方法，多数人是使用css背景图来实现，包括上面提到的Google站长管理后台，Alexa官网等。是的，这种方法最容易掌握和应用。这正是本文要介绍的实现方法。
先来看看效果图。
css背景图实现文字链右边加一个箭头图标
上图显示两个超链接样式，分别是两个不同的箭头图标，其实他们是一个背景图，我们可以通过css实现在文字链右边自动添加这样的一个背景图。
css代码如下：
.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;
}
关键代码是 background:url 这里，url是一个图片地址。上述css代码，url使用的是一个箭头图标的base64字符串，（导读：使用浏览器轻松获得图片base64字符串），这样的好处是不用再去请求图片，节省时间，提交效率。
下面是html关键代码：
<p>
<font style="font-size:16px;font-weight:bold">超链接样式一</font><br>
html里使用<a href="#">select控件</a>，非常容易就能实现下拉菜单的效果。但是由于<a href="#">select控件</a>只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，<a href="#">p+css实现的下拉菜单</a>便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。
</p>
上述html代码看到，其实我们无需写任何额外代码，正常超链即可。这样的好处更在于，我们可以任何时候修改css代码，来设置超链的不同的样式，需不需要右边箭头图标，也可以在css里轻松搞定。
完整的html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<title>css实例_文字超链接右边加一个箭头_卡卡网 webkaka.com</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<p>
<font style="font-size:16px;font-weight:bold">超链接样式一</font><br>
html里使用<a href="#">select控件</a>，非常容易就能实现下拉菜单的效果。但是由于<a href="#">select控件</a>只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，<a href="#">p+css实现的下拉菜单</a>便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。
</p>
</body>
</html>
【相关推荐】
1. CSS3免费视频教程
以上就是用css实现文本超链文字右边加一个箭头图标的详细内容，更多请关注其它相关文章！