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

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

如果我理解正确的话，这就是你要找的

    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%);}

在这里摆弄

或另一个更实用的示例添加另一个伪元素 ::before

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

演示在这里