Question

我试图在每个h2标签后面做一行。我无法弄清楚我应该如何判断宽度，因为h2标题的长度不同于h2到h2。

我使用：after方法创建行

       h2:after {
       position: absolute;
       content: "";
       height: 2px;
       background-color: #242424;
       width: 50%;
       margin-left: 15px;
       top: 50%;
       }

在此处检查代码：http://jsfiddle.net/s9gHf/ 正如您所看到的那样，线路太宽，使网站太宽。

Answer 1

您可以使用额外的<span>：

来实现此目的

<强> HTML

<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>

<强> CSS

h2 {
    position: relative;
}

h2 span {
    background-color: white;
    padding-right: 10px;
}

h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

http://jsfiddle.net/myajouri/pkm5r/

另一个没有额外<span>的解决方案，但在overflow: hidden上需要<h2>：

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

http://jsfiddle.net/myajouri/h2JRj/

Answer 2

使用flexbox：

h2 {
    display: flex;
    align-items: center;

}

h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 1px solid #000;
}

HTML：

<h2>Title <span></span></h2>

Answer 3

在我看来，这是另一个使用flex包装器的更简单的解决方案：

HTML：

.wrapper {
  display: flex;
  align-items: center;
}

.line {
  border-top: 1px solid grey;
  flex-grow: 1;
  margin: 0 10px;
}

CSS：

session_start()

JSFiddle

Answer 4

我是这样做的： http://jsfiddle.net/Zz7Wq/2/

我使用背景而不是之后使用我的H1或H2来覆盖背景。不完全是你的方法，但对我来说效果很好。

CSS

.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }

HTML

<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>

Answer 5

这是我找到结果的最简单方法：只需在文本前使用hr标签，然后为文本设置边距顶部。非常简短易懂！ jsfiddle

h2 {
  background-color: #ffffff;
  margin-top: -22px;
  width: 25%;
}

hr {
  border: 1px solid #e9a216;
}

<br>

<hr>
<h2>ABOUT US</h2>

Answer 6

不再需要额外的包装器或span元素。 Flexbox和Grid可以轻松处理此问题。

h2 {
  display: flex;
  align-items: center;
}

h2::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;
}

<h2>Heading</h2>

Answer 7

我根本没有经验，所以随时可以纠正。但是，我尝试了所有这些答案，但始终在某些屏幕上有问题。因此，我尝试了以下对我有用的方法，并在除移动设备之外的几乎所有屏幕中按我的意愿进行显示。

<div class="wrapper">
   <div id="Section-Title">
     <div id="h2"> YOUR TITLE
        <div id="line"><hr></div>
     </div>
   </div>
</div>

CSS：

.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}

#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}

#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}

#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}

#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }

使用css在文本后创建行

7 个答案: