标题文本重叠其框架式边框边框

Question

我正在尝试创建附加图像的HTML / CSS等价物。本规范以图像形式提供给我。

文本必须是集中的，并且可以是动态宽度。

底部的边框必须始终伸展到标题元素的边缘。

边框必须停在文字开始和结束的位置。

任何想法是实现这一目标的最佳途径吗？

由于我还没有足够的代表来发布图片，所以这里有一个链接：

Attachment Image

Answer 1

你如何去做它将取决于你是否需要这个在印刷背景上工作。

http://codepen.io/cimmanon/pen/gnEdA

Flexbox的

这适用于打印背景没问题，但浏览器支持很差：IE10，Opera，Chrome。它不需要额外的标记。 http://caniuse.com/#feat=flexbox

h1 {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-style: italic;
}

h1:before, h1:after {
  display: block;
  border-bottom: 2px solid blue;
  content: " ";
  margin-bottom: 6px;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

白色背景

这应该适用于您能想到的任何浏览器。但是，它需要坚实的背景和额外的标记。

h1 {
  border-bottom: 2px solid blue;
  text-align: center;
}

h1 span {
  background: white;
  position: relative;
  top: 6px;
}