18

如何仅使用css3对文本实现这种类型的样式，意味着标签中间有一条水平线......可以使用纯css吗......

在此处输入图像描述

这是我的结构：-

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

8 回答 8

40

您可以使用纯 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/

于 2016-10-09T11:25:35.577 回答
14

这是通过在 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}​

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

于 2012-07-09T09:18:16.877 回答
8

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

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/

于 2012-07-09T09:18:20.750 回答
7

你可以像这样使用 1% 的渐变

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

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

于 2014-10-02T08:28:54.193 回答
6

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

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

于 2017-03-06T06:51:54.420 回答
5

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;
}
于 2019-03-25T11:17:59.503 回答
4

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

于 2019-01-09T10:24:09.270 回答
0

我从 fork 更新了我的解决方案。

http://jsfiddle.net/0f9catjy/

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>

CSS块

/**
 * 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
 */
于 2020-12-26T09:01:08.530 回答