html - 这可以用 CSS 完成吗？

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

来源

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

没有图像版本（我更喜欢 display:table 版本）

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 规范，我在几个spans中添加了

<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-horizo​​ntal-line/#comment-34913