超链接下划线样式
  


 作者 
 奥利·威廉姆斯（Ollie Williams） 

 已发表 
 2019年8月30日 

翻译自: https://css-tricks.com/styling-links-with-real-underlines/
超链接下划线样式

2019-03-15 18:14:06
微信公开课小程序热门讨论关于「小程序定制新手小白，请问这条下划线的样式是如何实现的」的小程序开发问题
补充:小程序定制新手小白，请问这条下划线的样式是如何实现的
展开:样式文件中没有找到相关的设置啊，谢谢即速小程序：*1像素边线*linewtop,linewbottom,linehleft,linehright{position:relative;}linewtop::after,linewbottom::after{position:absolute;content:;width:100%;height:2rpx;background:ccc;transformorigin:50%100%;transform:scaleY(05);}linewtop::after{top:0;left:0;}linewbottom::after{bottom:0;left:0;}linehleft::after,linehright::after{position:absolute;content:;width:2rpx;height:100%;background:ccc;transformorigin:100%50%;transform:scaleX(05);}linehleft::after{top:0;left:0;}linehright::after{top:0;right:0;}用法是直接加class
更多有关「小程序定制新手小白，请问这条下划线的样式是如何实现的」的讨论可以前往微信公开课小程序参与互动哦！
标签：微信公开课,小程序

用CSS自定义博客链接字体及链接下划线的样式
 


<style type="text/css">
A { text-decoration: NONE; color:#51bfe0}
A:hover {font-weight: bold;color:#990099}
<style>
 
鼠标放在链接字体上的时候，链接字体变粗，颜色改变，其中color:#990099表示链接字体改变的颜色，可以根据个人爱好修改，其他的不需要改。 
<style type="text/css">
a{text-decoration:none; color:#51bfe0}
A:hover{font-size:23; background:#ffd306; color:#990099}
</style>
 
鼠标鼠标放在链接字体上的时候，链接字体大小改变，颜色改变，有背景颜色。font-size:23表示字体大小；background:#ffd306表示背景颜色color:#990099表示字体颜色，可以根据个人爱好修改，其他的不需要改。 
<style type="text/css">
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
</style>
 
去掉链接字体的下划线。 
<STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover {border-bottom:1px dashed #51bfe0 }
<style type="text/css">
 
鼠标放在链接字体上的时候，链接字体加虚线。

<style type="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { position: relative; left:10px; top:10px; }
</STYLE>
鼠标放在链接字体上的时候，链接字体会移动，其left:10px表示字体向上移动的距离，top:10px表示字体向上移动的距离，可以根据个人爱好修改具体数值，其他的不需要改。

<style type="text/css">
a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; }
a:hover { background: url(背景图片地址) repeat-x 100% 100%; }
</style>
鼠标放上在链接字体上的时候，链接字体出现图片背景。

<style type="text/css">
a{ text-decoration: none; white-space: nowrap; padding-bottom: 10px; }
a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nm') repeat-x 100% 100%; }
</style>
鼠标放在链接字体上的时候，出现花朵下划线的效果。

<style type="text/css">
a { text-decoration: none; white-space: nowrap; padding-bottom: 5px; }
a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nn') repeat-x 100% 100%; }
</style>
鼠标放在链接字体上的时候，出现滚动箭头下划线的效果。

注意：有些代码应该甚用，如果用不好反而会适得其反，影响页面美观效果！这些代码用的时候添加空白面板就行了。还有就是这些都是CSS代码，不能放在完全没有东西的空白面板里，可以把它放到已有内容的面板中。

    

1  tvUserTel.setText(Html.fromHtml("<u>"+usertel+"</u>"));
2  tvUserTel.setTextColor(Color.BLUE);//设置为蓝色

 

转载于:https://www.cnblogs.com/Tristan2012/archive/2012/11/06/2757239.html