[CSS]分享几条漂亮的下划线样式

最新推荐文章于 2024-09-26 19:20:29 发布
最新推荐文章于 2024-09-26 19:20:29 发布
阅读量197 收藏
点赞数

早上看到一篇博客，内容没什么，但其中有几条漂亮的下划线感觉非常不错，虽然非常简单，但对于经常写博的人很有用，这里分享一下，喜欢的就直接拿去用吧。

使用方法：

1.后台管理->设置：[页首Html代码]里面加上下面这句：

2.在正文中使用类似如下的写法，将需要用下划线标注的文字包在特定的cass="underline数字"的标签里：


 
underline1:从前有座山，山里有个老和尚...
 
 
3.最终显示的效果如下所示：
 
 
underline1:从前有座山，山里有个老和尚...
underline2:从前有座山，山里有个老和尚...
underline3:从前有座山，山里有个老和尚...
underline4:从前有座山，山里有个老和尚...
underline5:从前有座山，山里有个老和尚...
underline6:从前有座山，山里有个老和尚...
underline7:从前有座山，山里有个老和尚...
underline8:从前有座山，山里有个老和尚...
underline9:从前有座山，山里有个老和尚...
 
 
整体效果看这里：程序员笑话几则



                

        




    

    
  


            

                    
            


    



                



	

		

			

				
					
css 伪类 transform transition实现一个比较好看的下划线过渡效果

				
			

			

				

					阿豪
				

				

					12-04
					
					555
					
				

			

		

		

			
				
原文链接:
                 
                  css 伪类 transform transition实现一个比较好看的下划线过渡效果
                 
                
          ...

			
		

	



                

            
              



	

		

			

				
					
美化下划线

				
			

			

				

					taotaomin99的博客
				

				

					06-01
					
					2965
					
				

			

		

		

			
				
在CSS中，众所周知使用text-decoration:underline;可以为任何文本添加下划线的效果。不过我们一般都在初始化里把a标签的下划线去掉(text-decoration : none )，有没有想过美化这些下滑下划线呢~理想的场景中，强调使用下划线，它应该做到以下几点：
下划线应该位于文本基线（baseline）下方
下划线应该可以跳过下行字母
能改变下线线的颜色、粗细和样式
横跨文

			
		

	



              


  
              

                


	

		

			

				
					
js+css3精美圆角导航条下划线动画特效.html

				
			

			

				

					02-28
				

			

		

		

			
				
本文将探讨如何利用JavaScript和CSS3来创建一个具有精美圆角和下划线动画特效的导航条。这种设计不仅能提升用户体验，还能让网站看起来更加现代化和动感。  首先，我们需要定义HTML结构，通常一个导航栏由多个链接...

			
		

	





	

		

			

				
					
css 下划线所有样式

				
			

			

				

					08-02
				

			

		

		

			
				
关于下划线的样式，主要有以下几个方面：  1. `text-decoration`属性：这是控制文本装饰的主要属性，设置`underline`值可以添加下划线。例如：  ```css  a {  text-decoration: underline;  }  ```  2. `border-...

			
		

	



		

			
		



	

		

			

				
					
第四章 CSS样式基础

				
			

			

				

					2402_87161397的博客
				

				

					09-26
					
					2208
					
				

			

		

		

			
				
4.1 CSS概述


4.1.1.CSS的基本概念

CSS全称为“Casceading Siyle shee"，中文解释为“层叠样式表”、它是以 HTML 为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对基局的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、保的朗色器育景和其他效果实现更加精确的控制、只要对相应的代码做一些简单的整、学可以改交同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式


4.1.2传统HTML的缺点


			
		

	





	

		

			

				
					
css字体下划线的样式

				
			

			

				

					06-19
				

			

		

		

			
				
CSS中的下划线样式主要通过`text-decoration`属性来控制，它可以有几种不同的值：  1. **`none`**：这是默认值，不添加下划线。 2. **`underline`**：为文本添加常规的下划线。 3. **`overline`**：在文本上方添加一...

			
		

	





	

		

			

				
					
css 下划线

					
最新发布

				
			

			

				

					04-15
				

			

		

		

			
				
### 使用CSS实现文本下划线效果  在CSS中，可以通过多种方式实现文本的下划线效果。...- 需要精确控制下划线样式时，可采用伪元素方案。 - 若要增强用户体验并加入动态效果，则可以选择基于背景渐变的技术。  问题

			
		

	





	

		

			

				
					
有趣的css - 文字下划线条动画按钮

				
			

			

				

					设计师工作日常
				

				

					04-01
					
					1094
					
				

			

		

		

			
				
用 css 实现文字下划线条动画按钮。

			
		

	





	

		

			

				
					
css下划线样式

				
			

			

				

					lianghao2008的专栏
				

				

					08-08
					
					6883
					
				

			

		

		

			
				
下划线样式  body {  line-height: 24px; } a:link,a:visited {  color: #333;  text-decoration: none; } a:hover {  color: #990;  border-bottom: 1px dashed #990; } .xwgcbt {font-size: 16px;font-weight:bold;} a.

			
		

	





	

		

			

				
					
CSS实现酷炫动态下划线效果

				
			

			

				

					Hiroshi's
				

				

					02-20
					
					968
					
				

			

		

		

			
				
先上效果：

  <div class="words">兔几????你好鸭</div>

	*{
      margin: 0;
      padding: 0;
    }
    .words {
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      position: absolute;
      left: 50%;
      t

			
		

	





	

		

			

				
					
【案例练习】16—25个CSS 文本下划线的实现案例

				
			

			

				

					web前端开发
				

				

					04-05
					
					1172
					
				

			

		

		

			
				
英文 | https://niemvuilaptrinh.medium.com/19-css-text-underline-for-websites-b17a52c8ac6f今天的文章，我们将一起来学习如何将网站中的默认下划线设计成漂亮的下划线效果，同时，可以提升用户体验，也可以帮助网站来吸引用户的注意力！现在，我们就开始今天的内容。01、CSS下划线效果集合演示地址：h...

			
		

	





	

		

			

				
					
巧用CSS定义下划线样式

				
			

			

				

					hwj1107的专栏
				

				

					12-10
					
					1105
					
				

			

		

		

			
				
CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段。但是，或许你可能注意到了，对于下划线，CSS提供的可选操作却不是很多。一般情况下，人们看到的下划线基本上都是横直线，缺少生气和灵动。不过，路并不是死的，通过一些绝妙的改造，我们还是可以做出富有创意的下划线来使页面更为美观。 　　这是一个自定义下划线的例子：自定义的下划线 。是不是很酷呢？除了能 让你的网页呈现出一个与众不同的风格之外

			
		

	





	

		

			

				
					
css实现tab导航下划线动画效果(从中间过渡到两边)

				
			

			

				

					努力变好
				

				

					08-12
					
					4077
					
				

			

		

		

			
				
tab导航的中间开始然后向两边过渡的动画效果，增加页面的美观性...

			
		

	





	

		

			

				
					
css之下划线的几种写法

				
			

			

				

					qq_46617584的博客
				

				

					09-08
					
					3135
					
				

			

		

		

			
				
css之下划线的几种写法

			
		

	





	

		

			

				
					
CSS3技巧30：简单而实用的CSS导航下划线动画效果

				
			

			

				

					九天翔龙的技术博客
				

				

					12-30
					
					2878
					
				

			

		

		

			
				
2021 结束了

迎来了 2022

回望这一年，收获了不少，也失去了很多。

--------------------------------------------------------------

特做一个导航小动画，作为今年博客的一个结束。

明年继续~！

------------------------------------------------------------

先看效果：



这中导航下划线动画效果，在很多网站上都有用到，包括腾讯、字节跳动的官网。

主要用到的知识点



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值