我需要帮助解决这个 CSS 问题。我要风格<h2>
背景颜色仅适用于文本的方式元素,以及边框底部。
这是预览。
我本可以自己完成的,这并不难,但问题是我无法在 <span>
中添加额外的元素(如 <h2>
标签)标签。所以我正在寻找一种纯 css 的方式来实现这种样式。
CSS 代码:
h2 {
color: rgb(0, 0, 0);
font: 700 16px Open Sans;
top: 0px;
margin: 0px;
padding: 5px;
text-transform: uppercase;
border-bottom: 2px solid rgb(136, 136, 136);
}
最佳答案
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;
}
但是你不能(据我所知)将填充设置为 :first-line
如果你会使用jQuery LIVE DEMO
jQ:
$('h2').wrapInner("<span />");
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;
}
关于css - h2 设置背景色和下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21317112/