将标题放在 CSS 中的 2 条水平线内答案

【问题标题】：Putting Heading within 2 horizontal lines in CSS将标题放在 CSS 中的 2 条水平线内
【发布时间】：2013-06-06 12:21:23
【问题描述】：

我想在 2 对水平线之间放置一个 h3 标题就像这样：

任何人都可以帮助我实现这个想法 html,css中的那个

更新

请问我怎样才能做到这一点，但使用锚标签（实际上是一个按钮）我希望它是这样的：

【问题讨论】：

对不起兄弟英语是我的第二语言:)

标签： html css

【解决方案1】：

您可以设置伪元素的样式，如下所示：http://jsbin.com/epeceb/1/

CSS

h3 {
  width: 500px;
  font: 30px Arial;
  font-weight: normal; 
  text-align: right;
  position: relative;
}

h3 span {
  background: #fff; 
  margin-right: 15%;
  padding: 0 20px;
}

h3:before {
  content: "";
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -4px;
  position: absolute;
  z-index: -1;
  height: 0;
  border-top: 8px double red;
}

截图

【讨论】：

这就是我想要的！非常感谢:)
不错的解决方案。默认情况下，或者通过某些样式重置，h3 的z-index 可能是auto。在这种情况下，需要h3 { zindex: 0; } 才能使其正常工作。

【解决方案2】：

实现这一点的最佳方法是使css中的两行具有一个绝对的div，它将越过具有白色背景的行。应该可以完美运行。

【讨论】：

+1 我也会这样做。唯一的问题是您是否有带纹理的背景。例如，您可以在伪元素上制作带有边框的线条。
嗯嗯嗯好主意斯蒂芬，其实我要试试 :) 谢谢！