CSS中的文本之间的行

Question

我无法在html和css中得到一个段落的结果。 我想在文本之间设置2行（或2个边框），如下所示：

---- TEXT ---- 

我如何使用CSS或类似的东西来做到这一点？

Answer 1

您可以尝试使用：before和:after这样的伪元素：

<强> HTML

<p>Test</p>

<强> CSS

p:before{
    content:"----";
}

p:after{
    content:"----";
}

fiddle

Answer 2

这是一种快速简便的方法，只要您的背景是纯色。

HTML：

<p class="myCopy">
    <span>My Text goes here</span>
</p>

CSS：

.myCopy {
    display: block;
    height: 10px;
    border-bottom: solid 1px #000;
    text-align: center;
}

.myCopy span {
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

调整.myCopy的高度值以上下移动线条。更改内部跨度的背景颜色以匹配主要背景颜色。

编辑：这是一个小提琴 - FIDDLE!!!

Answer 3

您可以使用段落<p>或换行符<br>标记来分隔文字。 此外，水平规则<hr>标记会创建一条水平线来分隔文字。

Answer 4

来自CSS Title with Horizontal Line on either side

的最高回答

这个怎么样：

<h1 class='strikearound'>Lined Title</h1>

h1.strikearound {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1.strikearound:before, h1.strikearound:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: grey;
}
h1.strikearound:before {
    margin-left: -50%;
    text-align: right;
}

Demo in fiddle

不错的是它不依赖于任何特定的背景颜色

<强>截图：

Answer 5

您可以使用position: relative移动底部边框上的子项以获得纯色。

HTML：

<p class="myCopy">
    <span>My Text goes here</span>
</p>

的CSS：

.myCopy {
    display: block;
    border-bottom: solid 1px #000;
    text-align: center;
}

.myCopy span {
    position:relative;
    bottom: -10px;
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

样式版： http://jsfiddle.net/UnG4T/1/

或者您可以使用100％宽度:after和:before，其他bg为负余量

.myCopy {
    position: relative;
    display: block;
    text-align: center;
}

.myCopy::before, .myCopy::after{
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 100%;
    border-bottom: solid 1px #000;
}

.myCopy::before{
    margin-left: -100%;
}

.myCopy span {
    display: inline-block;
    padding: 0 10px;
}

样式版： http://jsfiddle.net/UnG4T/3/