问题描述:
使用: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排在不同行。