如何在两行之间制作一些文字？

Question

嗨，我有一些文字和一行。

我需要让图片看起来像这样：

在我的HTML代码中，它看起来像这样：

<div class="container">
        <div class="line"></div> 
            <h2>Some Text!!!</h2>
        <div class="line"></div>
</div>

的CSS：

.container {
text-align: center; 

}

.line {
    height: 5px;
    background: #FFEE90;
}

我应该写什么来在文字之间放置文字。？

Answer 1

您可以通过多种方式实现这一目标。

您可以使用伪元素之前和之后添加内容行

p:before {
    content: "_____";
    color: blue;
    position: absolute;
    top: -5px;
    left: -45px;
}

p:after {
    content: "_____";
    color: blue;
    position: absolute;
    top: -5px;
    right: -45px;
}

示例：http://jsfiddle.net/82EvC/

另一种方式可能是边界线

p:before {
    content: "";
    border: 1px solid blue;
    position: absolute;
    width: 50%;
    top: 8px;
    left: -45px;
}

p:after {
    content: "";
    border: 1px solid blue;
    width: 50%;
    position: absolute;
    top: 8px;
    right: -45px;
}

示例：http://jsfiddle.net/82EvC/1/

Answer 2

尝试这个（在h2元素上使用一行和相对位置）：

jsfiddle.net/td8L8 /

Answer 3

试试这个。全宽线和一些html。

DEMO

<div class="line"><span>Some text</span></div>


.line {
  position: relative;
  text-align: center;
}
.line:after {
  content: "";
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}
.line span {
  padding: 0 8px;
  background-color: white;
  position: relative;
}