Question

文本后面的行只能用CSS完成吗？

Answer 1

是。

HTML：

<h2><span>Centered Header Text</span></h2>

CSS：

body {
    background: #ccc;
}

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

JSFiddle

Source

Answer 2

是的，可以。

没有图片，没有桌子，只有两个元素和简单的CSS。

这是演示它的小提琴：http://jsfiddle.net/URrdP/

HTML：

<div> <span>Text Here</span> </div>

CSS：

div {
    font-size: 45px;
    border: #EEEEEE inset 2px;
    position: relative;
    text-align:center;
    height: 0px;
}
span {
    position: relative;
    top:-0.7em;
    background: #CCCCCC;
}

这里的关键点是外部元素有一个插入边框和零高度，内部元素位于半条线上方，因此它位于外部元素边界的顶部。

另一个关键点是内部元素具有纯色背景，否则边框线将显示。这意味着当您将技术置于坚实的背景之上时，该技术才能真正成功运行;将它置于渐变或图像之上可能效果不佳。

在我的例子中，我可能没有完美的颜色或字体大小，但原则应该对你完美无缺。

CSS边框inset可能不是为您提供完美色彩匹配的最佳方式;如果您需要对颜色进行更精细的控制，可以为border-top和border-bottom指定单独的颜色。

Answer 3

以下是如何在没有图像的情况下做类似的事情。

HTML：

<h1><span>Text Here</span></h1>

CSS：

body, span { background: #ccc; }

h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }

JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/

Answer 4

没有图像版本（我更喜欢显示：表格版本）

CSS：

body
{background:silver;}

h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}

h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}

h1::after
{margin-top:-1px;border-color:gray}

h1 > span
{background:silver;position:relative;z-index:1;}

HTML：

<h1>
  <span>
    Text Here<br>
    On Multiple Lines too
  </span>
</h1>

演示：http://jsbin.com/uqexar/1/edit

Answer 5

由于没有HTML规范，我添加了几个span s

<h1>
  <span class="wrapper">
    <span class="text">TEXT HERE</span>
    <span class="line"></span>
  </span>
</h1>

CSS：

h1 {
    width:300px;
    background:#dcdcdc;
    padding:10px;
    text-align:center;
    color:#333;
}
.wrapper {
    display:block;
    position:relative;
}
.line {
    display:block;
    height:1px;
    background:#cecece;
    border-bottom:1px solid #e3e3e3;
    width:100%;
    position:absolute;
    top:50%;
    z-index:100;
}
.text {
    z-index:200;
    position:relative;
    padding:10px;
    background:#dcdcdc;
    display:inline-block;
}

这意味着该行看起来像您指定的两个灰色。

http://jsfiddle.net/3q5he/

Answer 6

这可以使用单个元素完成：

http://jsfiddle.net/Puigcerber/vLwDf/

<h1>Heading</h1>

h1 {
    overflow: hidden;
    text-align: center;
}
h1:before,
h1:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}

原产地：http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913

这可以用CSS完成吗？

6 个答案: