如何获得标题在文本后面有一条水平线？

Question

我正在构建一个网站，一块模型位于

之下

由于我使用的是构建HTML的内容管理系统，因此我必须使用单个h3标记。我希望后面的行具有包含div标记的h3的宽度。这可能吗？

这是我能得到的最接近的地方：http://jsfiddle.net/rmgtq6h6/

h3.line-behind { width: auto; position: relative; text-align: center}
    h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: 1; }

Answer 1

你走了：

https://jsfiddle.net/rmgtq6h6/1/

div.line-behind {
  width: auto;
  position: relative;
  text-align: center
}
span {
  content: " ";
  border-top: 3px solid black;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: -1;
}
h3 {
  background-color: #fff;
  display: inline-block;
}
}

<div class="line-behind"><span></span>
  <h3>Begin My Giving Journey</h3>
</div>

或者看看这里：

http://codepen.io/ericrasch/pen/Irlpm

Answer 2

1. 将文字放在某个容器中

2. 以此文字为中心

3. 将一些宽度应用于容器

4. 给容器一些背景颜色

＆＃13;
＆＃13;
h3.line-behind { width: auto; position: relative; text-align: center}
    h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: -1; }
#container{
   
    margin:0 auto;
    background-color:white;
    width:40%;
}
＆＃13;
<h3 class="line-behind"><div id="container">Begin My Giving Journey</div></h3>
＆＃13;
＆＃13;
＆＃13;

Answer 3

如果我理解正确，那就是你在寻找什么

    h3.line-behind:after {
     position:absolute;
  content:'';
  height:2px;
  width:150%;
  top:50%;
  transform:translateY(-50%);
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
  background: linear-gradient(to right, rgba(25,25,25,0) 0%,
                                        rgba(25,25,25,1) 35%,
                                        rgba(255,255,255,0) 36%,
                                        rgba(255,255,255,0) 65%,
                                        rgba(25,25,25,1) 66%,
                                        rgba(25,25,25,0) 100%);}

fiddle here

或其他更实用的例子在

之前添加另一个伪元素::

h3.line-behind:after { position:absolute;
  content:'';
  height:2px;
  width:50%;
  top:50%;
  transform:translateY(-50%);
  left:0;
  transform:translateX(-50%);
  z-index:-1;
  background: #000; }
h3.line-behind:before {position:absolute;
  content:'';
  height:2px;
  width:50%;
  top:50%;
  transform:translateY(-50%);
  right:0;
  transform:translateX(50%);
  z-index:-1;
  background: #000; }

demo here

Answer 4

我们可以轻松地建立这些保证

• 没有图片
• 没有额外的
• HTML Scalable（也就是说，您可以添加更大的文本 并自动调整大小以适应）
• 流体
• 没有JavaScript

方法1：伪元素

h1:before {
    content:"";
    display: block;
    border-top: solid 1px black;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
}
h1 span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

演示：http://jsfiddle.net/7s79zwz5/

方法2：相邻的兄弟选择器

h1+p {
    border-top: solid 1px black;
    padding-top: 40px;
    margin-top: -40px;
}

演示：http://jsfiddle.net/v9g3d4ua/

方法3：线性梯度

h1 {
    background: -moz-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #ffffff), color-stop(50%, #000000), color-stop(51%, #000000), color-stop(52%, #ffffff), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: -o-linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
    background: linear-gradient(#ffffff 0%, #ffffff 49%, #000000 50%, #000000 51%, #ffffff 52%, #ffffff 100%);
}

演示：http://jsfiddle.net/2m30vsgm/