浅谈CSS自定义下划线

问题描述：

使用:first-letter将首字母的font-size增大后，下划线text-underline也会变粗。

eg：

	
		
	
	
		
About
		
Technology
	

解决方法：

自定义下划线。使用:after，首先添加一个空的内容，为了让它排列到标题的下面，需要将其变成块级元素，用border-bottom设置下划线，可设置其颜色、粗细，下划线的长度通过设置空内容的width属性来实现，还可以通过margin-top调整下划线与文字的距离。

	
		
	
	
		
About
		
Technology
	

尚存在的问题：

不同文本的长度通常不一致，所需下划线的长度也不一样。

可采取的解决办法：

根据文本的长度设置下划线的长度，可以用jQuery来实现。

	
		
		
	
	
		
About
		
Technology
	

注意：

1、为使得div的宽度根据内容文字长度而定，需要设置width:auto，而width:auto又需要float:left才有效。

2、clear:left清除float:left带来的左浮动，才能使各个div排在不同行。