网页设计css链接样式有哪些（用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法）

我们网友是否有看到在访问有些博客网站的时候内容中有文本链接的时候会看到在后面或者前面会有一个图标 
    
    
    ，这样用户体验上看确实比我们直接文本点击容易给点击打开
     


     


     


，算是一个提高用户体验的方式    
    
    
。那这样的样式是如何实现的呢？在这篇文章中老蒋整理几个常见的方法 




 




 




，一种是直接CSS样式在有文章链接的前面或者后面添加 

   

   

   ，一种是直接用WordPress替换函数样式  


     


     


    。

1 
    
    
    、定义单独的样式

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


 




 




 


。

a.external { background: url(/images/external.png) center right no-repeat; padding-right: 13px; }

图标我们自己准备   

   

   

。

<a href="#" class="external">Link</a>

在需要添加的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; } .content a:hover { color: blue; }

这里直接用CSS背景图实现
     

     

     

，但是需要用到图片的BASE64加密  




  




  




，我们需要自己准备



  




  




  

。

3 




 




 




、WordPress直接替换规则

我们可以直接用WP替换链接规则自动加上前缀的图标  


  


  


。

//文章内外链添加go跳转 function the_content_nofollow($content){ preg_match_all(/<a(.*?)href="https://www.yuucn.com/(.*?)"(.*?)>/,$content,$matches); if($matches){ foreach($matches[2] as $val){ if(strpos($val,://)!==false && strpos($val,home_url())===false && !preg_match(/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i,$val)){ $content=str_replace("<a href=\"$val\"", "<i class=fa fa-external-link aria-hidden=true></i><a href=\"".home_url()."/go/?url=$val\" ",$content); } } } return $content; } add_filter(the_content,the_content_nofollow,999);

这里还将外部的地址用GO跳转 


  


  


  ，这个根据自己需要可以设置的    
     
     
  。

这样
     
     
     
，我们可以根据实际的需要自己选择喜欢哪种




   




   




   
。

参考文档：

1 

   

   

   、http://www.webkaka.com/tutorial/html/2019/050748/

2
     

     

     

、http://www.webkaka.com/tutorial/html/2016/112522/

3  




  




  




、https://www.machunjie.com/web/496.html