在使用Css3的背景中的水平线

Question

如何仅使用css3将这种类型的样式实现为文本,意味着标记中间的水平线...可以使用纯CSS ...

这是我的结构: -

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

Answer 1

您可以使用线性渐变作为背景使用纯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 2

这是通过在p中添加span来实现此目的的一种方法.

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}?

演示: http ://jsfiddle.net/9GMJz/

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

您可以像这样向段落选择器添加一个伪元素：

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 Rasch 的 CodePen：https ://codepen.io/ericrasch/pen/Irlpm

Answer 5

你可以用这样的1%渐变来做到这一点

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

您将额外的跨度与组件的背景颜色相同,以使其看起来像"已删除"文本后面的行.

Answer 6

Artur 的解决方案创建了一条线，但是如果增加 px 值，很明显该线仍然是渐变的。这可以通过使用中间颜色的开始和停止来解决，如下所示：

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

该线将是给定 px 值厚度的两倍（由于 +px -px），因此上面给出了穿过元素中心的水平 2px 线。

Answer 7

使用 flex 和 ::before 和 ::after 的替代方案。使用此解决方案，您无需为内容使用背景。

使用此 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;
}

Answer 8

另一种方法是使用线性渐变作为背景并将其放置在段落或 div 的中间。

p {
  background-image: linear-gradient(red, red);
  background-size: 100% 1px; /* add your height of the line here*/
  background-repeat: no-repeat;
  background-position: 50% 50%; /*place it in the middle */
}