使用Css3在背景中显示水平线 如何仅使用CSS3实现这种类型的文本，意味着标签中间的水平行…是否可以使用纯css

这是我的结构：-

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

4周前

这里有一种方法，在p中添加一个span

HTML:

---

演示：

我知道的最简单的方法之一，您可以这样实现：

HTML

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

JSFiddle

---

你可以用1%的梯度像这样做

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

---

您需要将额外的跨距设置为与组件背景相同的背景色，使其看起来像是“删除”了文本后面的行。

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

4周前
p{
背景：线性梯度（180度，
rgba（0,0,0,0）计算值（50%-1px），
rgba（1921,1）钙（50%），
rgba（0,0,0,0）计算值（50%+1px）
);
}

---

您可以向段落选择器添加伪元素，如下所示：

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的代码笔，了解一个工作示例：

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线。

另一种选择是flex and:：before和：：after。 使用此解决方案，您不需要为内容使用背景

使用此HTML标记：

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

---

我从fork得到了解决方案的更新

Html块

<h1 class="lined"><span>H1 Lined Sample</span></h2>
<h2 class="lined"><span>H2 Lined Sample</span></h2>
<h3 class="lined"><span>H3 Lined Sample</span></h2>

<h1 class="lined lined-double"><span>H1 Double-lined Sample</span></h1>
<h2 class="lined lined-double"><span>H1 Double-lined Sample</span></h2>

/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 2.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

h1.lined, h2.lined, h3.lined, h4.lined, h5.lined, h6.lined
{
    font-family: sans-serif;
    position: relative;
    text-align: left;
    z-index: 1;
}

h1.lined:before,
h2.lined:before,
h3.lined:before,
h4.lined:before,
h5.lined:before,
h6.lined:before
{
        border-top: 2px solid #dfdfdf;
        content: "";
        margin: 0 auto;
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 95%;
        z-index: -1;
    }

h1.lined span,
h2.lined span,
h3.lined span,
h4.lined span,
h5.lined span,
h6.lined span
{
        background: #fff;
        padding: 0 15px;
    }

h1.lined-double:before, 
h2.lined-double:before, 
h3.lined-double:before, 
h4.lined-double:before, 
h5.lined-double:before, 
h6.lined-double:before
{
        border-top: none;
    }

h1.lined-double:after,
h2.lined-double:after,
h3.lined-double:after,
h4.lined-double:after,
h5.lined-double:after,
h6.lined-double:after
{
    border-bottom: 1px solid blue;
    -webkit-box-shadow: 0 3px 0 0 red;
    -moz-box-shadow: 0 3px 0 0 red;
    box-shadow: 0 3px 0 0 red;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
    right: 0;
    width: 95%;
    z-index: -1;
    transform: translateY(calc(-50% + 3px));
}
/** END
 * Horizontal Type Line Behind Text
 */

---

这不是一条水平线吗？太棒了！。正是我们需要的，Tnx！这可能是目前最好的解决方案，因为FlexBox已经被广泛使用。它不是后台的一行。在您需要IE11支持之前，这是一个很好的解决方案

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

.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;
}

<h1 class="lined"><span>H1 Lined Sample</span></h2>
<h2 class="lined"><span>H2 Lined Sample</span></h2>
<h3 class="lined"><span>H3 Lined Sample</span></h2>

<h1 class="lined lined-double"><span>H1 Double-lined Sample</span></h1>
<h2 class="lined lined-double"><span>H1 Double-lined Sample</span></h2>

/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 2.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

h1.lined, h2.lined, h3.lined, h4.lined, h5.lined, h6.lined
{
    font-family: sans-serif;
    position: relative;
    text-align: left;
    z-index: 1;
}

h1.lined:before,
h2.lined:before,
h3.lined:before,
h4.lined:before,
h5.lined:before,
h6.lined:before
{
        border-top: 2px solid #dfdfdf;
        content: "";
        margin: 0 auto;
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 95%;
        z-index: -1;
    }

h1.lined span,
h2.lined span,
h3.lined span,
h4.lined span,
h5.lined span,
h6.lined span
{
        background: #fff;
        padding: 0 15px;
    }

h1.lined-double:before, 
h2.lined-double:before, 
h3.lined-double:before, 
h4.lined-double:before, 
h5.lined-double:before, 
h6.lined-double:before
{
        border-top: none;
    }

h1.lined-double:after,
h2.lined-double:after,
h3.lined-double:after,
h4.lined-double:after,
h5.lined-double:after,
h6.lined-double:after
{
    border-bottom: 1px solid blue;
    -webkit-box-shadow: 0 3px 0 0 red;
    -moz-box-shadow: 0 3px 0 0 red;
    box-shadow: 0 3px 0 0 red;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
    right: 0;
    width: 95%;
    z-index: -1;
    transform: translateY(calc(-50% + 3px));
}
/** END
 * Horizontal Type Line Behind Text
 */