使用CSS3背景中的水平线(Horizontal Line in Background using

如何实现这种类型的风格只使用CSS3的文本，是指在标签中间的横线......可以用纯CSS没有可能......

这里是我的结构： -

<p class="datedAside">4 weeks ago</p>

Answer 1:

以下是通过增加P内的跨度做到这一点的方法之一。

HTML：

<p class="datedAside"> <span> 4 weeks ago </span> </p>​

CSS：

p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}​

DEMO： http://jsfiddle.net/9GMJz/

Answer 2:

您可以使用线性渐变作为背景纯CSS实现这一点：

<p class="datedAside">4 weeks ago</p>
<style>
p {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0) calc(50% - 1px), 
        rgba(192,192,192,1) calc(50%), 
        rgba(0,0,0,0) calc(50% + 1px)
    );
}
</style>

https://jsfiddle.net/klesun/aujrkpLk/

Answer 3:

有一个问题我知道，你可以做到这一点像这样最简单的方法：

HTML

<p>Your text goes here</p>
<hr>

CSS

p {
    background: #fff; // or whatever is your bg-color
    display:inline-block;
    padding-right: 1em;
    line-height: 1.2em;
}

p+hr {
    margin-top: -0.6em;
}

的jsfiddle http://jsfiddle.net/cTMXa/1/

Answer 4:

你可以用1％的坡度这样做

.datedAside {
     background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
     background: #FFF;
     padding: 0 0.5rem;
}

你会NEDD额外的跨度是相同的背景颜色和组件的背景，使其看起来像它已经“删除”行会的文本之后。

Answer 5:

你可以伪元素添加到段落选择，如下所示：

p {
  ::before {
    border-top: 10px solid #0066a4;
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 12px; left: 0; right: 0; bottom: 0;
    z-index: -1;
  }
}

看到这个由Eric拉什CodePen的工作例如： https://codepen.io/ericrasch/pen/Irlpm

Answer 6:

阿图尔的解决方案创建但是如果你增加它变得清晰，线路仍然是一个渐变的像素值线。 这可以是固定的，通过使用一个开始和停止对中间色这样：

p {
    background: linear-gradient(to bottom, white calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), white calc(50% + 1px));
}

行会给出的像素值的2倍的厚度（由于+ PX -px）因此上述给出横跨元件的中心的水平线2px的。

Answer 7:

与柔性的替代和::之前和之后::。 有了这个解决方案，不需要使用背景的内容。

有了这个HTML标记：

<p class="datedAside"><span>4 weeks ago</span></p>

而这个CSS：

.datedAside {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  align-items: center;
}

.datedAside span {
  padding: 1em;

}

.datedAside::before, 
.datedAside::after {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  content: " ";
  height: 0px;
  border-bottom: 1px solid black;
}

文章来源: Horizontal Line in Background using Css3