浅谈CSS自定义下划线

来源：互联网发布：淘宝店铺特色装修编辑：程序博客网时间：2024/05/17 22:45

问题描述：

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

eg：

<!doctype html><html><head><style type="text/css">.text{text-decoration:underline;font-family:Times New Roman;font-size:24px;}.text:first-letter{font-size:48px;}</style></head><body><div class="text">About</div><div class="text">Technology</div></body></html>

解决方法：

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

<!doctype html><html><head><style type="text/css">.text{font-family:Times New Roman;font-size:24px;}.text:first-letter{font-size:48px;}.text:after {content:'';display:block;width:100px;margin-top:-5px;border-bottom:2px solid grey;}</style></head><body><div class="text">About</div><div class="text">Technology</div></body></html>

尚存在的问题：

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

可采取的解决办法：

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

<!doctype html><html><head><style type="text/css">.text{font-family:Times New Roman;font-size:24px;float:left;clear:left;width:auto;}.text:first-letter{font-size:48px;}.text:after {content:'';display:block;margin-top:-5px;border-bottom:2px solid grey;}</style><script src="js/jquery-1.8.2.min.js">$(document).ready(function(){$(.text).each(function(){$(this:after).css("width",$(this).css("width"));});});</script></head><body><div class="text">About</div><div class="text">Technology</div></body></html>

注意：

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

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

1 0