本文探讨了如何利用CSS的`:first-line`伪元素和jQuery来实现标题的美化，包括设置文字颜色、背景色、边框以及内边距。同时，提到了`:first-line`伪元素的限制，如无法设置内边距，以及使用jQuery作为替代方案的方法。
h2{
font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
border-bottom: 2px solid #000;
background:#000;
color:#fff;
display:inline-block;
padding:3px 15px;
margin-left:10px;
}
h2:after{ /* the line under H2 */
left:0px;
display:block;
position:absolute;
width:100%;
height:3px;
margin-top:2px;
content: " ";
background:#000;
}
您可以尝试使用:first-line伪：DEMO
h2{
font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
border-bottom: 2px solid #000;
}
h2:first-line{
background:#000;
color:#fff;
}
但你不能(AFAIK)将填充设置为:first-line
如果您可以使用jQuery
JQ：
$('h2').wrapInner("");
CSS：
h2{
font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
border-bottom:2px solid #000;
}
h2 span{
display:inline-block;
margin-left:10px;
padding:5px 20px;
background:#000;
color:#fff;
}
扫一扫
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
