h2设置背景颜色和下划线

Question

我需要这个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);
}

Answer 1

<强> LIVE DEMO

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

Answer 2

这是使用:after伪元素执行此操作的一种方法：

h2 {
    color: rgb(0, 0, 0);
    font: 700 16px Open Sans;
    margin: 0px;
    background:black;
    color:white;
    padding:10px;
    display:inline-block;
    text-transform: uppercase;
}
h2:after {
    content:" ";
    display:block;
    border-bottom: 2px solid rgb(136, 136, 136);
    background:black;
    width:100%;
    position:absolute;
    left:0;
    margin-top:10px; /*Apply same value of padding-bottom*
}

使用:after元素生成的线条仅取决于父级h2宽度，因为h2不是绝对位置的相对值。

选中 Demo

Answer 3

使用:after：

h2 { 
    border-bottom:2px solid black;
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
    color: white;
}

h2:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 200px;
    background: black;
    left: 16px;
    z-index: -1;
}

Fiddle