html - 使标题文本以类似盒子的方式重叠其底部边框

Question

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

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

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

边框必须在文本开始和结束的地方停止。

有什么想法是实现这一目标的最佳方法吗？

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

附件图片

Answer 1

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

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

弹性盒

这可以在打印的背景上工作，但浏览器支持很差：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;
}