如何在HTML中呈现由文本叠加的行？

Question

我想在我的设计中做这样的事情，我不确定应该怎么做：

Answer 1

虽然这可以通过伪元素来实现，但可能是最轻松的方式＆＃39;将span与div包裹在一起，例如使用以下代码：

Demo Fiddle

* nb，可以看到文本的偏心对齐演示here

HTML

<div>
    <span>text text text</span>
</div>

CSS

body {
    background:black;
}
div {
    border-bottom:4px solid grey;
    height:.5em;
    text-align:center;
}
span {
    color:orange;
    display:inline-block;
    margin:0 auto;
    background:black;
    padding:0 10px;
}

---

请注意，在语义上它可能更适合use hr而非div，但上面已使用div，因为hr通常与更多{{1}}相关联风格＆＃39;开箱即用＆＃39;这需要被覆盖 - 从而增加了所需的CSS数量。

Answer 2

click for Demo

HTML

<div id="container">
    <div id="line">

</div>   
  <div id="text">
      <span> text</span>
      <span> text</span>
      <span> text</span>
</div>  


</div> 

的CSS

#container
{

    width:100%;
    height:100px;
    background-color:yellow;
}
#line{

    width:100%;
    height:5px;
    background-color:orange;
    position:absolute;
    z-index:2;
    top:35px;
}
#text{

    width:100%;
    height:5px;
    color:greem;
    position:absolute;
    z-index:3;
    top:30px;
    left:500px;
}