如何获得标题在文本后面有一条水平线？ [英] How to get a headline to have a horizontal line behind the text?

问题描述

我正在建立一个网站，一个模型在下面

I'm constructing a site and a piece of the mockup is below

由于我使用内容管理系统构建HTML，所以我必须使用一个 h3 标记。我想要后面的行具有包含 h3 标签的 div 的宽度。这可能吗？

Since I'm using a content management system that builds the HTML, all I have to work with a single h3 tag. I want the line behind to have the width of the div containing the h3 tag. Is this possible?

这是距离我最近的地方： http：// jsfiddle.net/rmgtq6h6/

Here's the closest that I can get: 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; }

推荐答案

如果我理解正确，

    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

或更实用的另一个示例在

or another example more practical add another pseudo-element ::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; }

demo here

这篇关于如何获得标题在文本后面有一条水平线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！