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

但是你不能(据我所知)将填充设置为 :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;
}