用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法

我们网友是否有看到在访问有些博客网站的时候内容中有文本链接的时候会看到在后面或者前面会有一个图标，这样用户体验上看确实比我们直接文本点击容易给点击打开，算是一个提高用户体验的方式。那这样的样式是如何实现的呢？在这篇文章中老蒋整理几个常见的方法，一种是直接CSS样式在有文章链接的前面或者后面添加，一种是直接用WordPress替换函数样式。

1、定义单独的样式

我们可以单独给需要设置A跳转的文本设置一个样式。

a.external {

background: url(/images/external.png) center right no-repeat;

padding-right: 13px;

}

Select CodeCopy

图标我们自己准备。

Link

Select CodeCopy

在需要添加的URL添加样式external。

2、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,iVBORw0KG2iRXFWCMUAAAAASUVORK5CYII=) center right no-repeat;

padding-right:13px;

margin-left:3px;

margin-right:3px;

text-decoration: underline;

color: #c30;

}