h2设置背景颜色和下划线 [英] h2 set background color and underline

问题描述

我需要有关此CSS问题的帮助.我想为< h2> 元素设置样式，使背景颜色仅适用于文本，并且也适用于边框底部.

i need help with this CSS problem. I want to style <h2> element in a way that the background color only applies to the text, and also a border-bottom.

这是预览.

我本来可以做到这一点，这并不困难，但是问题是我不能在< h2> 标记.所以我正在寻找一种纯CSS样式的方式.

I could have done this my self, its not that difficult but the problem is that i cant add extra elements (like <span> tag) inside the <h2> tag. so i'm looking for a pure css way to that type of styling.

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 伪代码:演示

h2{
  font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
  border-bottom: 2px solid #000;
}
h2:first-line{
  background:#000;
  color:#fff;
}

但是您不能(AFAIK)将填充设置为:第一行

But you cannot (AFAIK) set padding to :first-line

如果可以使用jQuery 实时演示

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;
}

这篇关于h2设置背景颜色和下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！