html h2无下划线,h2设置背景颜色和下划线

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;

}